所謂知己知彼百戰(zhàn)不殆，在升級(jí)前讓我們先了解下 webpack4 都做了哪些重大改變以及優(yōu)化吧。此處只針對(duì)我了解的對(duì)我有影響有聯(lián)系的進(jìn)行翻譯說明。更多詳細(xì)內(nèi)容參見 webpack4
白話說區(qū)別
- 新增了 mode 參數(shù)來區(qū)分開發(fā)環(huán)境還是生產(chǎn)環(huán)境，開發(fā)環(huán)境側(cè)重于構(gòu)建的速度，生產(chǎn)環(huán)境側(cè)重于打包后的文件大小
在開發(fā)環(huán)境中，我們更注重的是如何及時(shí)快速的將更新的代碼展示在網(wǎng)頁上，如何快速定位錯(cuò)誤，因此webpack提供了強(qiáng)效source-map和模塊熱更新的機(jī)制來幫助開發(fā)人員。在生產(chǎn)環(huán)境中，我們需要的是如何讓代碼包更小、構(gòu)建更迅速，因此有了輕量級(jí)source-map，css代碼壓縮工具，tree shaking配和js壓縮工具等等，都是為了讓最后打包出來的代碼體量更小。 同樣在項(xiàng)目較為復(fù)雜的時(shí)候也需要將代碼進(jìn)行分包處理，使用異步加載，進(jìn)一步提高用戶使用時(shí)的加載速度，同樣為了彌補(bǔ)webpack在node中也是單線程加載的原因，還提供了HappyPack，使得webpack能夠并行加載。 - 移除 loaders，必須使用 rules ( 在 3 版本的時(shí)候 loaders 和 rules 是共存的但是到4的時(shí)候只允許使用rules )
- 移除了 CommonsChunkPlugin (提取公共代碼)，用 optimization.splitChunks 和 optimization.runtimeChunk 來代替
- 支持 es6 的方式導(dǎo)入 JSON 文件，并且可以過濾無用的代碼
- ExtractTextWebpackPlugin 調(diào)整，建議選用新的 CSS 文件提取插件 mini-css-extract-plugin，production 模式，增加 minimizer
官方說區(qū)別如下
Big changes
- Environment - 環(huán)境
Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version.
不再支持 Node.js 4。 源碼升級(jí)到 ecmascript 的更高版本。 - Usage - 用法
You have to choose (mode or --mode) between two modes now: production or development
必須選擇( mode 或 --mode )一個(gè)模式: 'development' 或 'production' 。 - Syntax - 語法
import() always returns a namespace object. CommonJS modules are wrapped into the default export
import() 總是返回一個(gè)對(duì)象。CommonJS 模塊會(huì)被封裝在 default 屬性中。也就是說之前的 import 寫法在升級(jí) webpack4 之后可能導(dǎo)致不兼容。 - Configuration - 配置
不再需要以下插件：
1、NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors（默認(rèn)情況下在生產(chǎn)模式下啟用）
2、ModuleConcatenationPlugin- > optimization.concatenateModules（默認(rèn)情況下在生產(chǎn)模式下啟用）
3、NamedModulesPlugin- > optimization.namedModules（默認(rèn)情況下在開發(fā)模式下啟用）
4、CommonsChunkPlugin 被移除掉換成 - > optimization.splitChunks，optimization.runtimeChunk 來配置 - JSON
- Optimization 優(yōu)化
Big features
- Modules 模塊
- Optimization 優(yōu)化
sideEffects: false is now supported in package.json
現(xiàn)在在 package.json 中支持 sideEffects 特性，它可以為 tree-shaking 提供更大的優(yōu)化空間。 - Syntax 語法
- Configuration 配置
optimization.minimize has been added to switch minimizing on/off
optimization.minimize 可以控制是否壓縮
By default: on in production mode, off in development mode
默認(rèn)生產(chǎn)環(huán)境壓縮，開發(fā)環(huán)境不壓縮。 - 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
生效了一些插件選項(xiàng)，必須安裝 webpack-cli 來使用CLI，--progress 可以顯示插件名稱 - Performance 性能
UglifyJs now caches and parallizes by default
UglifyJs 默認(rèn)緩存和并行，多項(xiàng)優(yōu)化。 - Stats 統(tǒng)計(jì)
Features
- Configuration 配置
sideEffects can be overriden via module.rules
sideEffects 可以通過 module.rules 覆蓋 - Runtime 運(yùn)行
- Devtool 開發(fā)工具
- 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
默認(rèn)情況下，使用更快的md4哈希 - Optimization 優(yōu)化
When using more than 25 exports mangled export names are shorter.
當(dāng)使用超過25個(gè)名稱導(dǎo)出，名字會(huì)壓縮的更短 - Defaults 默認(rèn)
1、output.pathinfo is now on by default in develoment mode
output.pathinfo 默認(rèn)為開發(fā)模式
2、in-memory caching is now off by default in production
默認(rèn)在生產(chǎn)環(huán)境關(guān)閉緩存
3、entry defaults to ./src
入口默認(rèn)為 ./src
4、output.path defaults to ./dist
出口默認(rèn)為 ./dist
5、Use production defaults when omiting the mode option
在沒有設(shè)置 mode 屬性時(shí)默認(rèn)為生產(chǎn)環(huán)境 - Usage 用法
- Stats 統(tǒng)計(jì)
- Plugins 插件
done is now an async hook
done 現(xiàn)在是一個(gè)異步鉤子
Bugfixes
bug修復(fù)
Internal changes
內(nèi)部進(jìn)行了許多優(yōu)化
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 的變化，原文有很多可點(diǎn)上方連接自行查閱
- map/foreach Chunks/Modules/Parents methods are now deprecated/removed
map/foreach Chunks/Modules/Parents 方法現(xiàn)已棄用/刪除
