传说中零配置
首先初始化一个项目
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模块，目前处于试验阶段。
网友评论