前言
本文主要是基于最近对于webpack4.0的一个学习笔记，之前看完3.0之后没有把笔记记录下来，后面再去复习感觉很凌乱，俗话说好记性不如烂笔头；
目前还没有把demo上传到git上，后期要把demo上传到git ～给自己一个提醒
准备工作
- webpack 需要用到 node ，打开 nodejs.org/en/ 下载 LTS版本安装，安装完成之后打开终端输入 node -v 查看是否安装成功
- 新建一个web项目，cd 到项目在项目根目录下执行 npm init
安装webpack 到全局
-
安装webapck 稳定版本版本
npm install -g webpack
-
查看当前安装的webpack版本
webpack -v
-
安装最新的体验版
npm install -g webapck@beta
- 安装特定的版本（比如4.28.2版本）
npm install -g webapck@4.28.2
- 如果不知道版本号，可以查看webpack 历史版本信息
npm info webapck
- 查看webpack 的当前可最新版本信息
npm view webapck version
安装webpack 到当前项目
- 打开终端进入新建的项目执行以下命令
npm install webpack --save-dev 或 npm install webapck -D
- 查看当前项目安装的webapck版本
npx webpack -v
- 安装指定版本
npm install webapck@4.28.2 --save-dev 或 npm install webapck@4.28.2 -D
- 安装最新体验版
npm install webapck@beta
- 安装webpack 脚手架, 使我们能在项目上使用webpack命令(比如 npx webpack)
在命令行使用 npx 命令 调用 webpack：
npx webpacknpx 会调用node_modules/.bin下的webpack文件, 在这个文件里，会先调用webpack-cli以读取命令行参数
npm install webpack-cli --save-dev
使用webpack
项目目录
根目录下创建 webpack.config.js / src
src 目录下创建 index.js / index.html / header.js/ sidebar.js
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原始网页开发</title></head><body> <h1>这是我们的网页开发</h1> <div id="root"> </div></body><script src="./bundle/bundle.js"></script></html>
index.js
// ES Module 语法 模块引入方式
import Header from './header'
// Common JS 模块引入规范var Sidebar = require('./sidebar.js')
new Header()new Sidebar()
header.js
function Sidebar() { var dom = document.getElementById('root') var header = document.createElement('div') header.innerText = 'header - ES Module' dom.append(sidebar)}// webpack export default Content
sidebar.js
function Sidebar() { var dom = document.getElementById('root') var sidebar = document.createElement('div') sidebar.innerText = 'sidebar - Common JS' dom.append(sidebar)}
// Common JS module.exports = sidebar
webapck.config.js
const path = require('path')module.exports = { entry: './index.js', // 入口文件 output: { // 出口文件 filename: 'bundle.js', // 别名， 所有依赖的模块合并到这个文件下 path: path.resolve(__dirname, 'bundle') // 文件输出的目录, 一般是 dist, 这里是我自己取的名字 }}
使用webpack 命令进行构建
npx webpack
或者在package.json 文件中进行配置编译命令；
"scripts": { "build": "webpack --config webpack.config.js" },
执行命令进行webpack项目编译，编程成功会在项目下生成一个bundle目录
npm run build
运行index.html
编译成功后打开index.html文件， 能在页面上看到 ‘header - ES Module‘'sidebar - Common JS'
打包输出内容
npm run build
> webpack4-demo01@1.0.0 build /Volumes/code/daisy/webpack/webpack4-demo01 // 项目名称
> webpack --config webpack.config.js // 打包命令
Hash: 32914026a8169709dbcc // 打包的唯一hash值
Version: webpack 4.44.2 // webpack 版本
Time: 77ms // 当前整体打包耗时
Built at: 2020-11-05 16:45:22
Asset Size // 打包的文件 Chunks // 每个js文件对应的id Chunk Names // 每个js文件对应的name 比如main
bundle.js 1.38 KiB // 打包一个bundle.js文件 0 [emitted] main // 入口文件名称 入口文件也可以多个
Entrypoint main = bundle.js
[0] ./src/index.js 1.08 KiB {0} [built]
[1] ./header.js 227 bytes {0} [built]
[2] ./sidebar.js 233 bytes {0} [built]
// 这里报了一个警告， 在webpack配置的时候没有指定打包的环境或者是打包的模式
// 这里有个 mode 在4.0以上webpack 配置里面需要用到mode
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
在 webpack 配置文件里面有个 mode，有两种模式， 设置默认模式 production 如下：
production: 打包出来的 bundle.js 文件是压缩过的代码
development : 打包出的 bundle.js 文件是没有进行压缩的代码
const path = require('path')module.exports = { mode: 'production', // 默认模式 // entry: './src/index.js', entry: { main: './src/index.js' }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }}
再次进行打包已经没有这个警告
总结
本文主要介绍webpack 的安装以及简单的使用， 能通过webpack去构建一个webpack环境，以及打包流程和打包之后输出内容的一个简单了解；
