传说中零配置
首先初始化一个项目
mkdir webpack4.x
cd webpack4.x
npm init
根目录下新建一个webpack.config.js
,然后新建一个src/index.js
, package.json
文件中新增两条命令
"dev": "node_modules/.bin/webpack-dev-server --mode development --open --progress --hot --hotOnly --config ./webpack.config.js",
"build": "node_modules/.bin/webpack --mode production --progress --config ./webpack.config.js"
安装依赖(我这里用的的是比较新的)
npm install webpack webpack-cli -D
"webpack": "^4.8.1",
"webpack-cli": "^2.1.3",
开发环境
npm run dev
生产环境
npm run build
webpack4.0传说中的零配置,不是说不需要配置,而是默认不需要配置入口和出口,提前给我们设置了默认值
entry的默认值是 src/index.js
,必须是index.js
output的默认值是dist/main.js
下面有几点注意项:
- 4.x的webpack,必须配合着webpack-cli
npm install webpack-cli -D
- package.json 中 最好使用我们安装的依赖
node_modules/.bin/webpack-dev-server
webpack4.x的默认配置可以在如下路径找到:
node_modules/webpack/lib/WebpackOptionsDefaulter.js
mode意义更为明确
新增 mode 配置,可选择而且必须设置为 development 或 production,它们的主要区别是 development 更重视构建时间,production 更重视尺寸。并且,有了 mode 之后,无需配置即可启动,实现了零配置。
弃用CommonsChunkPlugin
使用 optimize.splitChunks 和 optimization.runtimeChunk 替代 CommonsChunkPlugin。现在我们可以更简单的实现代码分割和提取公共代码等操作。
开箱即用WebAssembly
支持 WebAssembly,现在可以导入入 WebAssembly 支持的其它语言文件,在运行时的性能得到大幅度提升
支持多种模块导入引用
支持 CommonJS, AMD, ESM 等模块系统。
- javascript/auto: 在webpack3里,默认开启对所有模块系统的支持,包括CommonJS、AMD、ESM。
- javascript/esm: 只支持ESM这种静态模块。
- javascript/dynamic: 只支持CommonJS和AMD这种动态模块。
- json: 只支持JSON数据,可以通过require和import来使用。
- webassembly/experimental: 只支持wasm模块,目前处于试验阶段。