所谓知己知彼百战不殆，在升级前让我们先了解下 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 模块
- 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
移除下述插件、模块、属性
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 方法现已弃用/删除
网友评论