webpack 4.0.0-beta.0版本新特性介紹

近年來(lái)前端技術(shù)如雨后春筍般蓬勃發(fā)展，我們也在這個(gè)潮流下不斷地學(xué)習(xí)、成長(zhǎng)。前端技術(shù)的不斷發(fā)展，給我們提供了許多的便利。例如：JSX的出現(xiàn)為我們提供了一個(gè)清晰、直觀的方式來(lái)描述組件樹(shù)，LESS/SASS的出現(xiàn)提高了我們書(shū)寫(xiě)css的能力，AMD/CommonJS/ES6 的出現(xiàn)為我們模塊化開(kāi)發(fā)提供了便利。然而，我們需要使用其它工具將這些工具轉(zhuǎn)化成原生語(yǔ)言以運(yùn)行在瀏覽器上。為了能夠更好的將這些不同的資源整合到一起，我們就需要一個(gè)打包工具，webpack就是這個(gè)需求下的產(chǎn)物。
webpack 可以看做是模塊打包機(jī)。它做的事情是：分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。目前，webpack 總共發(fā)布了三個(gè)穩(wěn)定版本。從17年八月底開(kāi)始，經(jīng)歷了長(zhǎng)達(dá)五個(gè)月的開(kāi)發(fā)周期，webpack 團(tuán)隊(duì)通過(guò)增加大量新特性、bug修復(fù)、問(wèn)題改善并于近期發(fā)布了 webpack 4.0.0 的 beta 版本。如果你對(duì) webpack 感興趣，下面我們就來(lái)學(xué)習(xí)一下 webpack 4.0.0-beta.0 的新特性。
P.S. 以下所有代碼演示代碼都是基于 webpack 4.0.0-beta.0。

1、安裝webpack v4.0.0-beta.0

如果你使用yarn:

yarn add webpack@next webpack-cli --dev

如果你使用npm:

npm install webpack@next webpack-cli --save-dev

2、webpack 4.0.0.beta.0 新特性介紹

下面是一些你肯定會(huì)感興趣的新特性。如果閱讀完本章后還覺(jué)得不過(guò)癮，你可以再這查看完整的changelog。

本章將從以下幾部分來(lái)介紹 webpack 4.0.0-beta.0。

2.1 環(huán)境

webpack 運(yùn)行環(huán)境升級(jí)。已經(jīng)不支持 Node.js 4 版本。源碼升級(jí)到更高的 ECMAScript 版本。

根據(jù) webpack package.json 配置中顯示 Node.js 最低支持版本：”node”: “>=6.11.5”

2.2 模塊

webpack 模塊類(lèi)型及 .mjs 的支持：

長(zhǎng)久以來(lái)，JS是webapck中唯一的模塊類(lèi)型。正因此，開(kāi)發(fā)者無(wú)法有效地打包其它類(lèi)型的文件。目前，webpack實(shí)現(xiàn)了五種模塊類(lèi)型，它們各有自己的優(yōu)勢(shì)，可按需要使用（后面會(huì)詳細(xì)說(shuō)明）。

1. javascript/auto: (webpack3中默認(rèn))支持所有的JS模塊系統(tǒng)：CommonJS、AMD、ESM。
2. javascript/esm: EcmaScript模塊，所有其他模塊系統(tǒng)不可用（.mjs文件中默認(rèn)）。
3. javascript/dynamic: 不支持CommonJS和EcmaScript模塊。
4. json: JSON數(shù)據(jù)，可以通過(guò)require和import導(dǎo)入（.json文件默認(rèn)）。
5. webassembly/experimental: WebAssembly模式（目前處于實(shí)驗(yàn)性階段，.wasm文件默認(rèn)）。

用法：

module.rules 中的 type 就是新增加的屬性，用來(lái)支持不同的模塊類(lèi)型。

 module: {
  rules: [{
    test: /\.special\.json$/,
    type: "javascript/auto",
    use: "special-loader"
  }]
 }

此外，現(xiàn)在webpack 按照 .wasm, .mjs, .js, 以及 .json 等擴(kuò)展名的順序來(lái)解析。

javascript/esm 相比于 javascript/auto 處理ESM更加嚴(yán)格:
具體表現(xiàn)在兩個(gè)方面：1. 導(dǎo)入的名稱(chēng)必須存在于導(dǎo)入的模塊中。2. 動(dòng)態(tài)的模塊（非ESM，例如CommonJS）只能通過(guò)默認(rèn) import 導(dǎo)入，其他所有（包括命名空間導(dǎo)入）的導(dǎo)入都會(huì)報(bào)錯(cuò)。

2.3 用法

必須在 “開(kāi)發(fā)或者生產(chǎn)” 中選擇一種模式（這里有一種隱藏模式 none，可以禁用一切功能）。

1）生產(chǎn)模式不支持監(jiān)聽(tīng)，開(kāi)發(fā)模式針對(duì)快速增量重建進(jìn)行了優(yōu)化。
2）生產(chǎn)模式同樣支持模塊串聯(lián)，即變量提升（此功能在webpack 3 中已經(jīng)實(shí)現(xiàn)）。
3）開(kāi)發(fā)模式下支持注釋和提示，并且支持 eval 的source map。

將 CLI 移動(dòng)到 webpack-cli 中，你需要通過(guò)安裝 webpack-cli 使用 CLI。

你可以使用 optimization.* 標(biāo)志來(lái)配置自己的自定義模式。

webpackInclude 和 webpackExclude 可以通過(guò)神奇的注釋來(lái)支持 import() ，他們?cè)试S在使用動(dòng)態(tài)表達(dá)式時(shí)過(guò)濾文件。
使用 System.import() 會(huì)發(fā)出警告:

1）可以使用 Rule.parser.system:true 關(guān)閉警告。
2）你也可以使用 Rule.parser.system:false 關(guān)閉 System.import()。

對(duì)于遷移到新的插件系統(tǒng)的插件 ProgressPlugin 現(xiàn)在顯示插件名稱(chēng)。

webpack 現(xiàn)在可以本地處理 JSON。如果用 loader 轉(zhuǎn)換 json 為 js，需要設(shè)置： type:”javascript/auto”。當(dāng)然，不用 loader webpack 依然可以正常工作。

2.4 配置

刪除了一些常用內(nèi)置插件：

1）NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (生產(chǎn)模式默認(rèn))。
2）ModuleConcatenationPlugin -> optimization.concatenateModules （生產(chǎn)模式默認(rèn)）。
3）NamedModulesPlugin -> optimization.namedModules （開(kāi)發(fā)模式默認(rèn)）。

刪除了常用的 CommonsChunkPlugin -> optimization.splitChunks對(duì)于那些需要細(xì)粒度控制緩存策略的人，可以通過(guò) optimization.splitChunks和 optimization.runtimeChunk。 現(xiàn)在可以使用 module.rules[].resolve來(lái)配置解析。它與全局配置合并。

optimization.minimize 用于控制minimizing的開(kāi)關(guān)。 生產(chǎn)模式默認(rèn)為開(kāi)，開(kāi)發(fā)模式默認(rèn)為關(guān)。

optimization.minimizer 用于配置minimizers和選項(xiàng)。

許多支持占位符的配置選項(xiàng)現(xiàn)在也支持函數(shù)形式。

錯(cuò)誤的 options.dependencies 配置現(xiàn)在會(huì)拋出異常。

sideEffects 可以通過(guò) module.rules 覆蓋。

添加 output.globalObject 配置選項(xiàng)以允許在運(yùn)行時(shí)選擇全局對(duì)象引用。

無(wú)需顯式設(shè)置entry和output屬性，webpack默認(rèn)設(shè)置entry屬性為./src，output的屬性為./dist。

移除module.loaders。

2.5 優(yōu)化

uglifyjs-webpack-plugin 升級(jí)到了 v 1，并且支持 ES6語(yǔ)法。

可以在 package.json 中配置 sideEffects:false 。當(dāng)設(shè)置這個(gè)字段之后，標(biāo)識(shí)在使用的庫(kù)里沒(méi)有任何副作用。這意味著webpack可以從代碼中安全地清除任何re-exports。

使用JSONP數(shù)組來(lái)代替JSONP函數(shù) –> 異步支持。

引入新的 optimization.splitChunks 選項(xiàng)。

webpack 可以刪除無(wú)用代碼，之前是由 Uglify 刪除無(wú)用的代碼，現(xiàn)在 webpack 也可以刪除無(wú)用的代碼。這可以有效防止在 import 無(wú)用的代碼之后發(fā)生的崩潰。

以下是一些內(nèi)部?jī)?yōu)化：
1）用 tap 調(diào)用替換 plugin 調(diào)用（新的插件系統(tǒng)）。
2）將許多廢棄的插件遷移到新的插件系統(tǒng)API。
3）為 json 模塊添加 buildMeta.exportsType:default。
4）刪除了 Parser (parserStringArray, parserCalculatedStringArray) 中未使用的方法。

2.6 性能

默認(rèn)情況，UglifyJS 默認(rèn)緩存和并行化（并未完全實(shí)現(xiàn)緩存和并行化，webpack5的里程碑）。

發(fā)布了一個(gè)新版本的插件系統(tǒng)，所以事件鉤子和處理程序變的單一化。

多個(gè)性能改進(jìn)，特別是更快的增量重建。

改進(jìn)了RemoveParentModluesPlugin的性能。

2.7 不兼容的改變（插件、loader相關(guān)）

新的插件系統(tǒng)：

1）插件方法是向后兼容的
2）插件現(xiàn)在應(yīng)該這樣使用 Compiler.hooks.xxx.tap(<plugin name>, fn)

Chunk.chunks/parents/blocks 不再是數(shù)組。在內(nèi)部使用一個(gè)集合，并且有方法來(lái)訪問(wèn)它。

Parser.scope.renames 和 Parser.scope.definitions 不再是對(duì)象/數(shù)組，而是Map/Set。

解析器使用 StackedSetMap（類(lèi)似于LevelDB的數(shù)據(jù)結(jié)構(gòu)）而不是數(shù)組。

在應(yīng)用插件時(shí)不再設(shè)置 Compiler.options。

所有模塊的構(gòu)造參數(shù)都發(fā)生了變化。

將 options 合并到 ContextModule 和 resolveDependencies 的 options 對(duì)象中.

更改并重命名 import() 的依賴關(guān)系

將 Compiler.resolvers 移入可通過(guò)插件訪問(wèn)的 Compiler.resolverFactory中。

Dependency.isEqualResource 已被替換為 Dependency.getResourceIdentifier

Template 方法都是靜態(tài)的。

已經(jīng)添加了一個(gè)新的 RuntimeTemplate 類(lèi)，outputOptions 和 requestShortener 已經(jīng)被移動(dòng)到這個(gè)類(lèi)中。

1）已經(jīng)更新了許多方法來(lái)代替 RuntimeTemplate 的使用。
2）我們計(jì)劃將訪問(wèn)運(yùn)行時(shí)的代碼移動(dòng)到這個(gè)新類(lèi)中

Module.meta已被Module.buildMeta所取代

已添加Module.buildInfo和Module.factoryMeta

Module的一些屬性已經(jīng)被移動(dòng)到新的對(duì)象中

添加指向上下文選項(xiàng)的 loaderContext.rootContext。loaders 可以使用它來(lái)創(chuàng)建相對(duì)于應(yīng)用程序根目錄的東西。

當(dāng)啟用HMR時(shí)，將 this.hot 標(biāo)志添加到 loader 上下文中。

buildMeta.harmony 已被替換為 buildMeta.exportsType：namespace。

chunk 圖已經(jīng)改變：

之前：Chunks 的連接與嵌套依賴關(guān)系有關(guān)。
現(xiàn)在：ChunksGroups 的連接與引用依賴有關(guān)，按照順序串聯(lián)。
之前：AsyncDependenciesBlocks 按順序引用 Chunks 列表。
現(xiàn)在：AsyncDependenciesBlocks 引用一個(gè) ChunkGroup。

★★ 注意：以上內(nèi)容都是關(guān)于 loaders、plugins 重大的變化。

3、重點(diǎn)更新詳解

3.1 更好的默認(rèn)值

直到今日，webpack 總是要求顯式地設(shè)置 entry 和 output 屬性。webpack 4.0.0-beta.0 中，webpack 會(huì)自動(dòng)設(shè)定你的 entry 屬性為 ./src 以及 output 的屬性為 ./dist。
這意味著您不再需要配置文件來(lái)啟動(dòng) webpack。接下來(lái)我們?yōu)槟阊菔緒ebpack 4.0.0-beta.0的便捷操作：

1、我們需要安裝好 webpack 之后，在 package.json 中添加如下腳本即可啟動(dòng)：

 "scripts": {
  "build": "webpack"
 },

2、在工程中添加簡(jiǎn)單示例代碼如下圖（整個(gè)工程沒(méi)有 webpack 配置文件，即可運(yùn)行打包）：

3、打包過(guò)程中我們發(fā)現(xiàn)有新特性的提示：

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

這就是我們下節(jié)要說(shuō)的內(nèi)容模式設(shè)置。

★★ 注意：入口默認(rèn)為 ./src 如果缺少此文件夾會(huì)報(bào)錯(cuò)！

> webpack --mode production
ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\workspace\github\Webpack-Example'

3.2 模式設(shè)置

以往的項(xiàng)目使用 webpack3 腳手架生成項(xiàng)目初始模板都會(huì)有兩個(gè)甚至三個(gè)配置文件，比如
webpack.base.conf.js、webpack.prod.conf.js、webpack.dev.conf.js 而現(xiàn)在可以做到一個(gè)配置文件都不需要，直接在啟動(dòng)命令中傳入?yún)?shù) --mode development | production 達(dá)到區(qū)分不同模式的效果。

接下來(lái)修改 package.json 設(shè)置不同的模式：

 "scripts": {
   "dev": "webpack --mode development",
   "build": "webpack --mode production"
 },

重新執(zhí)行 npm run dev 或 npm run build 即可看到不同的打包結(jié)果：

我們可以看到兩種模式的結(jié)果完全不同，下面我們會(huì)更深入的按照我們真實(shí)的需求來(lái)講解一些常用配置。

接下來(lái)這個(gè)配置是最常用到的，我們使用 webpack 的主要目的之一就是為了更好的支撐前段模塊化的能力，既然需要模塊化當(dāng)然少不了代碼分割，目前代碼分割有以下幾種：

1.  通過(guò) entry 分割不同入口，常用于多頁(yè)應(yīng)用；
2.  通過(guò) CommonsChunkPlugin 插件來(lái)分割不同功能模塊；
3.  通過(guò)動(dòng)態(tài) import 來(lái)分割。

下面我們主要講解 webpack 4.0.0-beta.0 版本的重大變化刪除了 CommonsChunkPlugin 插件。

3.3 刪除 CommonsChunkPlugin

webpack 4.0.0-beta.0刪除了 CommonsChunkPlugin，以支持兩個(gè)新的選項(xiàng)（optimization.splitChunks 和 optimization.runtimeChunk）。

從webpack 4.0.0-beta.0 開(kāi)始分割 Chunk 將不在使用 CommonsChunkPlugin 插件，而是使用 optimization 配置項(xiàng)，具體的實(shí)現(xiàn)原理可以參考 CommonsChunkPlugin。

由于還沒(méi)有正式官方文檔出來(lái)，以下是我們通過(guò)實(shí)踐出的 optimization 配置方法：
其中用到了新增的 splitChunks 屬性，此屬性看字面意思就明白是分割代碼塊的選項(xiàng)，其下可配置項(xiàng)已在下面示例代碼中列出（有興趣的朋友可以自行實(shí)踐）：

entry: {
   vendor: ['lodash']
},
 
...
 
optimization: {
   splitChunks: {
   chunks: "initial", // 必須三選一： "initial" | "all"(默認(rèn)就是all) | "async" 
   minSize: 0, // 最小尺寸，默認(rèn)0
   minChunks: 1, // 最小 chunk ，默認(rèn)1
   maxAsyncRequests: 1, // 最大異步請(qǐng)求數(shù)， 默認(rèn)1
   maxInitialRequests : 1, // 最大初始化請(qǐng)求書(shū)，默認(rèn)1
   name: function(){}, // 名稱(chēng)，此選項(xiàng)可接收 function
   cacheGroups:{ // 這里開(kāi)始設(shè)置緩存的 chunks
     priority: 0, // 緩存組優(yōu)先級(jí)
     vendor: { // key 為entry中定義的 入口名稱(chēng)
       chunks: "initial", // 必須三選一： "initial" | "all" | "async"(默認(rèn)就是異步) 
       test: /react|lodash/, // 正則規(guī)則驗(yàn)證，如果符合就提取 chunk
       name: "vendor", // 要緩存的 分隔出來(lái)的 chunk 名稱(chēng) 
       minSize: 0,
       minChunks: 1,
       enforce: true,
       maxAsyncRequests: 1, // 最大異步請(qǐng)求數(shù)， 默認(rèn)1
       maxInitialRequests : 1, // 最大初始化請(qǐng)求書(shū)，默認(rèn)1
       reuseExistingChunk: true // 可設(shè)置是否重用該chunk（查看源碼沒(méi)有發(fā)現(xiàn)默認(rèn)值）
     }
   }
 }
 },

以上就是 optimization.splitChunks 的所有可用的配置項(xiàng)屬性。

總結(jié)

以上就是我們初步整理的關(guān)于 webpack 4.0.0-beta.0 的新特性，包含了一部分的官方更新日志的翻譯，還有我們自己試驗(yàn)的一些屬性。當(dāng)然如果你有興趣，也可以等到正式的官方文檔發(fā)布之后進(jìn)行實(shí)踐。
如果上面的信息不能夠完全滿足你的興趣，還請(qǐng)關(guān)注官方日志。在未來(lái)不到一個(gè)月的時(shí)間里，webpack 將對(duì)插件、加載器以及整個(gè)生態(tài)系統(tǒng)進(jìn)行更加嚴(yán)格的測(cè)試，并發(fā)布最終的官方穩(wěn)定版本。如果你喜歡 webpack，你可以參與使用 webpack 4.0.0-beta.0。測(cè)試階段發(fā)現(xiàn)、解決的問(wèn)題越多，正式版本才會(huì)更加穩(wěn)定。

示例代碼

京東前端

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。