所谓知己知彼百战不殆，在升级前让我们先了解下 webpack4 都做了哪些重大改变以及优化吧。此处只针对我了解的对我有影响有联系的进行翻译说明。更多详细内容参见 webpack4
白话说区别
- 新增了 mode 参数来区分开发环境还是生产环境，开发环境侧重于构建的速度，生产环境侧重于打包后的文件大小
在开发环境中，我们更注重的是如何及时快速的将更新的代码展示在网页上，如何快速定位错误，因此webpack提供了强效source-map和?？槿雀碌幕评窗镏⑷嗽?。在生产环境中，我们需要的是如何让代码包更小、构建更迅速，因此有了轻量级source-map，css代码压缩工具，tree shaking配和js压缩工具等等，都是为了让最后打包出来的代码体量更小。 同样在项目较为复杂的时候也需要将代码进行分包处理，使用异步加载，进一步提高用户使用时的加载速度，同样为了弥补webpack在node中也是单线程加载的原因，还提供了HappyPack，使得webpack能够并行加载。 - 移除 loaders，必须使用 rules ( 在 3 版本的时候 loaders 和 rules 是共存的但是到4的时候只允许使用rules )
- 移除了 CommonsChunkPlugin (提取公共代码)，用 optimization.splitChunks 和 optimization.runtimeChunk 来代替
- 支持 es6 的方式导入 JSON 文件，并且可以过滤无用的代码
- ExtractTextWebpackPlugin 调整，建议选用新的 CSS 文件提取插件 mini-css-extract-plugin，production 模式，增加 minimizer
官方说区别如下
Big changes
- Environment - 环境
Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version.
不再支持 Node.js 4。 源码升级到 ecmascript 的更高版本。 - Usage - 用法
You have to choose (mode or --mode) between two modes now: production or development
必须选择( mode 或 --mode )一个模式: 'development' 或 'production' 。 - Syntax - 语法
import() always returns a namespace object. CommonJS modules are wrapped into the default export
import() 总是返回一个对象。CommonJS 模块会被封装在 default 属性中。也就是说之前的 import 写法在升级 webpack4 之后可能导致不兼容。 - Configuration - 配置
不再需要以下插件：
1、NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors（默认情况下在生产模式下启用）
2、ModuleConcatenationPlugin- > optimization.concatenateModules（默认情况下在生产模式下启用）
3、NamedModulesPlugin- > optimization.namedModules（默认情况下在开发模式下启用）
4、CommonsChunkPlugin 被移除掉换成 - > optimization.splitChunks，optimization.runtimeChunk 来配置 - JSON
- Optimization 优化
Big features
- Modules ?？?/li>
- Optimization 优化
sideEffects: false is now supported in package.json
现在在 package.json 中支持 sideEffects 特性，它可以为 tree-shaking 提供更大的优化空间。 - Syntax 语法
- Configuration 配置
optimization.minimize has been added to switch minimizing on/off
optimization.minimize 可以控制是否压缩
By default: on in production mode, off in development mode
默认生产环境压缩，开发环境不压缩。 - Usage 用法
Some Plugin options are now validated
CLI has been move to webpack-cli, you need to install webpack-cli to use the CLI
The ProgressPlugin (--progress) now displays plugin names
生效了一些插件选项，必须安装 webpack-cli 来使用CLI，--progress 可以显示插件名称 - Performance 性能
UglifyJs now caches and parallizes by default
UglifyJs 默认缓存和并行，多项优化。 - Stats 统计
Features
- Configuration 配置
sideEffects can be overriden via module.rules
sideEffects 可以通过 module.rules 覆盖 - Runtime 运行
- Devtool 开发工具
- Performance 性能
1、webpacks AST can be passed directly from loader to webpack to avoid extra parsing
webpacks AST可以直接从loader传递给webpack，以避免额外的解析
2、Use faster md4 hash for hashing by default
默认情况下，使用更快的md4哈希 - Optimization 优化
When using more than 25 exports mangled export names are shorter.
当使用超过25个名称导出，名字会压缩的更短 - Defaults 默认
1、output.pathinfo is now on by default in develoment mode
output.pathinfo 默认为开发模式
2、in-memory caching is now off by default in production
默认在生产环境关闭缓存
3、entry defaults to ./src
入口默认为 ./src
4、output.path defaults to ./dist
出口默认为 ./dist
5、Use production defaults when omiting the mode option
在没有设置 mode 属性时默认为生产环境 - Usage 用法
- Stats 统计
- Plugins 插件
done is now an async hook
done 现在是一个异步钩子
Bugfixes
bug修复
Internal changes
内部进行了许多优化
Removed features
移除下述插件、?？椤⑹粜?br>
removed module.loaders
removed loaderContext.options
removed Compilation.notCacheable flag
removed NoErrorsPlugin
removed Dependency.isEqualResource
removed NewWatchingPlugin
removed CommonsChunkPlugin
Breaking changes for plugins/loaders
loader 和 plugin 的变化，原文有很多可点上方连接自行查阅
- map/foreach Chunks/Modules/Parents methods are now deprecated/removed
map/foreach Chunks/Modules/Parents 方法现已弃用/删除
