webpack3 和 webpack4
1.mode
webpack 增加了一个 mode 配置，只有两种值 development | production。对不同的环境他会启用不同的配置。
2.CommonsChunkPlugin
webpack.optimize.CommonsChunkPlugin 已经从 webpack4 中移除。可使用 optimization.splitChunks 进行模块划分（提取公用代码）。
3.mini-css-extract-plugin （CSS 文件提取）
webpack4，删除原 extract-text-webpack-plugin 配置，增加 mini-css-extract-plugin 配置
4.安装依赖
新版 babel 使用新的命名空间 @babel
5.vue-loader。
vue-loader 15 注意要配合一个 webpack 插件才能正确使用
6.UglifyJsPlugin
现在也不需要使用这个 plugin 了，只需要使用 optimization.minimize 为 true 就行，production mode 下面自动为 true
7.移除 loaders，必须使用 rules（在 3 版本的时候 loaders 和 rules 是共存的但是到 4 的时候只允许使用 rules）
8.支持 es6 的方式导入 JSON 文件，并且可以过滤无用的代码
9.升级 happypack 插件（happypack 可以进行多线程加速打包）
webpack4 和 webpack5
压缩代码
webpack4 上需要下载安装 terser-webpack-plugin 插件，并且需要以下配置：
webpack5 内部本身就自带 js 压缩功能，他内置了 terser-webpack-plugin 插件，我们不用再下载安装。而且在 mode="production" 的时候会自动开启 js 压缩功能
webpack 缓存
webpack4 缓存配置 支持缓存在内存中 npm install hard-source-webpack-plugin -D
webpack5 内部内置了 cache 缓存机制。直接配置即可。 cache 会在开发模式下被设置成 type： memory 而且会在生产模式把 cache 给禁用掉
对 loader 的优化
webpack 4 加载资源需要用不同的 loader
- raw-loader 将文件导入为字符串
- url-loader 将文件作为 data url 内联到 bundle 文件中
- file-loader 将文件发送到输出目录中
webpack5 的资源模块类型替换 loader
- asset/resource 替换 file-loader(发送单独文件)
- asset/inline 替换 url-loader （导出 url）
- asset/source 替换 raw-loader（导出源代码）
- asset
参考
webpack3和webpack4区别 - Super_Mi - 博客园
贡献者
jiechen