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

本章將從以下幾部分來介紹 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 模塊類型及 .mjs 的支持：

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

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ù)，可以通過require和import導(dǎo)入（.json文件默認(rèn)）。
5. webassembly/experimental: WebAssembly模式（目前處于實(shí)驗(yàn)性階段，.wasm文件默認(rèn)）。

用法：

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

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

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

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

2.3 用法

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

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

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

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

webpackInclude 和 webpackExclude 可以通過神奇的注釋來支持 import() ，他們?cè)试S在使用動(dòng)態(tài)表達(dá)式時(shí)過濾文件。
使用 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)在顯示插件名稱。

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 （開發(fā)模式默認(rèn)）。

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

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

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

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

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

sideEffects 可以通過 module.rules 覆蓋。

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

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

移除module.loaders。

2.5 優(yōu)化

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

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

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

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

webpack 可以刪除無用代碼，之前是由 Uglify 刪除無用的代碼，現(xiàn)在 webpack 也可以刪除無用的代碼。這可以有效防止在 import 無用的代碼之后發(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è)集合，并且有方法來訪問它。

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

解析器使用 StackedSetMap（類似于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 移入可通過插件訪問的 Compiler.resolverFactory中。

Dependency.isEqualResource 已被替換為 Dependency.getResourceIdentifier

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

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

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

Module.meta已被Module.buildMeta所取代

已添加Module.buildInfo和Module.factoryMeta

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

添加指向上下文選項(xiàng)的 loaderContext.rootContext。loaders 可以使用它來創(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。
這意味著您不再需要配置文件來啟動(dòng) webpack。接下來我們?yōu)槟阊菔緒ebpack 4.0.0-beta.0的便捷操作：

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

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

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

3、打包過程中我們發(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é)要說的內(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ū)分不同模式的效果。

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

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

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

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

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

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

下面我們主要講解 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 開始分割 Chunk 將不在使用 CommonsChunkPlugin 插件，而是使用 optimization 配置項(xiàng)，具體的實(shí)現(xiàn)原理可以參考 CommonsChunkPlugin。

由于還沒有正式官方文檔出來，以下是我們通過實(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)求書，默認(rèn)1
   name: function(){}, // 名稱，此選項(xiàng)可接收 function
   cacheGroups:{ // 這里開始設(shè)置緩存的 chunks
     priority: 0, // 緩存組優(yōu)先級(jí)
     vendor: { // key 為entry中定義的 入口名稱
       chunks: "initial", // 必須三選一： "initial" | "all" | "async"(默認(rèn)就是異步) 
       test: /react|lodash/, // 正則規(guī)則驗(yàn)證，如果符合就提取 chunk
       name: "vendor", // 要緩存的 分隔出來的 chunk 名稱 
       minSize: 0,
       minChunks: 1,
       enforce: true,
       maxAsyncRequests: 1, // 最大異步請(qǐng)求數(shù)， 默認(rèn)1
       maxInitialRequests : 1, // 最大初始化請(qǐng)求書，默認(rèn)1
       reuseExistingChunk: true // 可設(shè)置是否重用該chunk（查看源碼沒有發(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)注官方日志。在未來不到一個(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)、解決的問題越多，正式版本才會(huì)更加穩(wěn)定。

示例代碼

京東前端

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

最新評(píng)論