相比于webpack3，webpack4可以零配置运行，打包速度比之前提高了90%，可以直接到ES6的代码进行无用代码剔除，新增的optimization使用简单
在未来，CSS、HTMl和文件都会成为原生模块
【0配置】
webpack4 设置了默认值，以便无配置启动项目
entry 默认值是 ./src/
output.path 默认值是 ./dist
mode 默认值是 production
【模块类型】
webpack4提供了5种模块类型
json: 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件)
webassembly: WebAssembly 模块，（目前是 .wasm 文件的默认类型）
javascript/auto: (webpack 3中的默认类型)支持所有的JS模块系统：CommonJS、AMD。
javascript/esm: EcmaScript模块（默认 .mjs 文件）。
javascript/dynamic: 仅支持 CommonJS & AMD。
webpack 4 不仅支持本地处理 JSON，还支持对 JSON 的 Tree Shaking。当使用 ESM 语法 import json 时，webpack 会消除掉JSON Module 中未使用的导出。此外，如果要用 loader 转换 json 为 js，需要设置 type 为 javascript/auto
模式mode
相比于webpack3，webpack4新增了一个mode配置选择，用来表示配置模式的选择情况
module.exports = { mode: 'production' }
包括生产环境production、开发环境devolopment和自定义none这三个选择可选
【开发模式】
浏览器调试工具
注释、开发阶段的详细错误日志和提示
快速和优化的增量构建机制
开启 output.pathinfo 在 bundle 中显示模块信息
开启 NamedModulesPlugin
开启 NoEmitOnErrorsPlugin
【生产模式】
启用所有优化代码的功能
更小的bundle大小
去除只在开发阶段运行的代码
关闭内存缓存
Scope hoisting 和 Tree-shaking
开启 NoEmitOnErrorsPlugin
开启 ModuleConcatenationPlugin
开启 optimization.minimize
【none】
禁用所有的默认设置
optimization
从webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置，下面来介绍optimization下的一些常用配置项
【minimize】
利用unglifyjsWebpackPlugin插件来压缩模块，生产环境下该值默认为true
optimization: { minimize: false }
【minimier】
可以使用其他插件来执行压缩功能
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { //... optimization: { minimizer: [ new UglifyJsPlugin({ /* your config */ }) ] } };
【splitChunks】
webpack4默认使用splitChunksPlugin插件来实现代码分割功能，来替代webpack3中的commonChunksPlugin插件
module.exports = { //... optimization: { splitChunks: { chunks: 'async', minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } } }
【runtimeChunk】
通过设置 runtimeChunk: true 来为每一个入口默认添加一个只包含 runtime 的 chunk
通过提供字符串值，可以使用插件的预设模式
signal: 创建一个被所有生成的块共享的runtime文件
multiple: 为共同的块创建多个runtime文件
缺省值为false，表示每个入口块默认内嵌runtime代码
runtimeChunk { name: "runtime" }
【noEmitOnErrors】
只要在编译时出现错误，就使用noEmitOnErrors属性来跳过emit 阶段，用来替代 NoEmitOnErrorsPlugin 插件
【nameModules】
使用可读的模块标识，方便更好的调试。webpack在开发模式下默认开启，生产模式下默认关闭，用来替代 NamedModulesPlugin 插件
module.exports = { //... optimization: { namedModules: true } };
升级
下面就基于vue-cli的项目对webpack配置进行升级
1、升级nodejs
使用 webpack4 时，必须保证 Node.js 版本 >= 8.9.4，因为 webpack4 使用了大量的ES6语法，这些语法在 nodejs新版 v8 中得到了原生支持
2、升级webpack主要部件，包括webpack、webpack-bundle-analyzer、webpack-dev-server、webpack-merge
升级的操作很简单，先删除，再安装即可。但要注意的是webpack4版本中 cli 工具分离成了 webpack 核心库 与 webpack-cli 命令行工具两个模块，需要使用 CLI ，必安装 webpack-cli 至项目中
cnpm uninstall -D webpack webpack-bundle-analyzer webpack-dev-server webpack-merge cnpm install -D webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge