体验webpack4.x的新特性

传说中零配置

首先初始化一个项目

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模块，目前处于试验阶段。