webpack

webpack 最出色的功能之一就是，除了 JavaScript，還可以通過 loader 引入任何其他類型的文件。

Webpack 核心概念：

• Entry（入口）：Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始，可抽象成輸入。
• Output（出口）：指示 webpack 如何去輸出、以及在哪里輸出
• Module（模塊）：在 Webpack 里一切皆模塊，一個模塊對應(yīng)著一個文件。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。
• Chunk（代碼塊）：一個 Chunk 由多個模塊組合而成，用于代碼合并與分割。
• Loader（模塊轉(zhuǎn)換器）：用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。
• Plugin（擴展插件）：在 Webpack 構(gòu)建流程中的特定時機會廣播出對應(yīng)的事件，插件可以監(jiān)聽這些事件，并改變輸出結(jié)果

配置項

入口 Entry

entry: {a: "./app/entry-a",b: ["./app/entry-b1", "./app/entry-b2"] }, 復制代碼

多入口可以通過 HtmlWebpackPlugin 分開注入

plugins: [new HtmlWebpackPlugin({chunks: ['a'],filename: 'test.html',template: 'src/assets/test.html'}) ] 復制代碼

出口 Output

修改路徑相關(guān)

• publicPath：并不會對生成文件的目錄造成影響，主要是對你的頁面里面引入的資源的路徑做對應(yīng)的補全
• filename：能修改文件名，也能更改文件目錄

導出庫相關(guān)

• library: 導出庫的名稱
• libraryTarget: 通用模板定義方式

模塊 Module

webpack 一切皆模塊，配置項 Module，定義模塊的各種操作，

Module 主要配置：

• loader： 各種模塊轉(zhuǎn)換器
• extensions：使用的擴展名
• alias：別名、例如：vue-cli 常用的 @ 出自此處

其他

• plugins: 插件列表
• devServer：開發(fā)環(huán)境相關(guān)配置，譬如 proxy
• externals：打包排除模塊
• target：包應(yīng)該運行的環(huán)境，默認 web

Webpack 執(zhí)行流程

webpack從啟動到結(jié)束會依次執(zhí)行以下流程：

初始化：解析webpack配置參數(shù)，生產(chǎn) Compiler 實例

注冊插件：調(diào)用插件的apply方法，給插件傳入compiler實例的引用，插件通過compiler調(diào)用Webpack提供的API，讓插件可以監(jiān)聽后續(xù)的所有事件節(jié)點。

入口：讀取入口文件

解析文件：使用loader將文件解析成抽象語法樹 AST

生成依賴圖譜：找出每個文件的依賴項（遍歷）

輸出：根據(jù)轉(zhuǎn)換好的代碼，生成 chunk

生成最后打包的文件

ps：由于 webpack 是根據(jù)依賴圖動態(tài)加載所有的依賴項，所以，每個模塊都可以明確表述自身的依賴，可以避免打包未使用的模塊。

Babel

Babel 是一個工具鏈，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環(huán)境中：

Babel 內(nèi)部所使用的語法解析器是 Babylon

主要功能

• 語法轉(zhuǎn)換
• 通過 Polyfill 方式在目標環(huán)境中添加缺失的特性 (通過 @babel/polyfill 模塊)
• 源碼轉(zhuǎn)換 (codemods)

主要模塊

• @babel/parser：負責將代碼解析為抽象語法樹
• @babel/traverse：遍歷抽象語法樹的工具，我們可以在語法樹中解析特定的節(jié)點，然后做一些操作
• @babel/core：代碼轉(zhuǎn)換，如ES6的代碼轉(zhuǎn)為ES5的模式

Webpack 打包結(jié)果

在使用 webpack 構(gòu)建的典型應(yīng)用程序或站點中，有三種主要的代碼類型：

源碼：你或你的團隊編寫的源碼。

依賴：你的源碼會依賴的任何第三方的 library 或 "vendor" 代碼。

管理文件：webpack 的 runtime 使用 manifest 管理所有模塊的交互。

runtime：在模塊交互時，連接模塊所需的加載和解析邏輯。包括瀏覽器中的已加載模塊的連接，以及懶加載模塊的執(zhí)行邏輯。

manifest：當編譯器(compiler)開始執(zhí)行、解析和映射應(yīng)用程序時，它會保留所有模塊的詳細要點。這個數(shù)據(jù)集合稱為 "Manifest"， 當完成打包并發(fā)送到瀏覽器時，會在運行時通過 Manifest 來解析和加載模塊。無論你選擇哪種模塊語法，那些 import 或 require 語句現(xiàn)在都已經(jīng)轉(zhuǎn)換為 webpack_require 方法，此方法指向模塊標識符(module identifier)。通過使用 manifest 中的數(shù)據(jù)，runtime 將能夠查詢模塊標識符，檢索出背后對應(yīng)的模塊。

其中：

• import 或 require 語句會轉(zhuǎn)換為 __webpack_require__
• 異步導入會轉(zhuǎn)換為 require.ensure（在Webpack 4 中會使用 Promise 封裝）

比較

• gulp 是任務(wù)執(zhí)行器(task runner)：就是用來自動化處理常見的開發(fā)任務(wù)，例如項目的檢查(lint)、構(gòu)建(build)、測試(test)
• webpack 是打包器(bundler)：幫助你取得準備用于部署的 JavaScript 和樣式表，將它們轉(zhuǎn)換為適合瀏覽器的可用格式。例如，JavaScript 可以壓縮、拆分 chunk 和懶加載，

實現(xiàn)一個 loader

loader 就是一個js文件，它導出了一個返回了一個 buffer 或者 string 的函數(shù);

譬如:

// log-loader.js module.exports = function (source) {console.log('test...', source)return source } 復制代碼

在 use 時，如果 log-loader 并沒有在 node_modules 中，那么可以使用路徑導入。

實現(xiàn)一個 plugin

plugin： 是一個含有 apply 方法的 類。

譬如：

class DemoWebpackPlugin {constructor () {console.log('初始化 插件')}apply (compiler) {} }module.exports = DemoWebpackPlugin 復制代碼

apply 方法中接收一個 compiler 參數(shù)，也就是 webpack實例。由于該參數(shù)的存在 plugin 可以很好的運用 webpack 的生命周期鉤子，在不同的時間節(jié)點做一些操作。

Webpack 優(yōu)化概況

Webpack 加快打包速度的方法

使用 include 或 exclude 加快文件查找速度

使用 HappyPack 開啟多進程 Loader 轉(zhuǎn)換

使用 ParallelUglifyPlugin 開啟多進程 JS 壓縮

使用 DllPlugin + DllReferencePlugin 分離打包

將 庫 和 項目代碼 分離打包

需要 dll 映射文件

配置緩存（插件自帶 loader，不支持的可以用 cache-loader）

Webpack 加快代碼運行速度方法

代碼壓縮

抽離公共模塊

懶加載模塊

將小圖片轉(zhuǎn)成 base64 以減少請求

預取(prefetch) || 預加載(preload)

精靈圖

webpack-bundle-analyzer 代碼分析

Webpack 優(yōu)化細節(jié)

webpack 4.6.0+增加了對預取和預加載的支持。

動態(tài)導入

import(/* webpackChunkName: "lodash" */ 'lodash')// 注釋中的使用webpackChunkName。// 這將導致我們單獨的包被命名，lodash.bundle.js// 而不是just [id].bundle.js。 復制代碼

預取(prefetch)：將來可能需要一些導航資源

• 只要父chunk加載完成，webpack就會添加 prefetch

import(/* webpackPrefetch: true */ 'LoginModal');// 將<link rel="prefetch" href="login-modal-chunk.js">其附加在頁面的開頭 復制代碼

預加載(preload)：當前導航期間可能需要資源

• preload chunk 會在父 chunk 加載時，以并行方式開始加載
• 不正確地使用 webpackPreload 會有損性能，

import(/* webpackPreload: true */ 'ChartingLibrary');// 在加載父 chunk 的同時// 還會通過 <link rel="preload"> 請求 charting-library-chunk 復制代碼

DllPlugin + DllReferencePlugin

為了極大減少構(gòu)建時間，進行分離打包。

DllReferencePlugin 和 DLL插件DllPlugin 都是在_另外_的 webpack 設(shè)置中使用的。

DllPlugin這個插件是在一個額外的獨立的 webpack 設(shè)置中創(chuàng)建一個只有 dll 的 bundle(dll-only-bundle)。 這個插件會生成一個名為 manifest.json 的文件，這個文件是用來讓 DLLReferencePlugin 映射到相關(guān)的依賴上去的。

webpack.vendor.config.js

new webpack.DllPlugin({context: __dirname,name: "[name]_[hash]",path: path.join(__dirname, "manifest.json"),}) 復制代碼

webpack.app.config.js

new webpack.DllReferencePlugin({context: __dirname,manifest: require("./manifest.json"),name: "./my-dll.js",scope: "xyz",sourceType: "commonjs2"}) 復制代碼

CommonsChunkPlugin

通過將公共模塊拆出來，最終合成的文件能夠在最開始的時候加載一次，便存到緩存中供后續(xù)使用。這個帶來速度上的提升，因為瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時，再去加載一個更大的文件。

如果把公共文件提取出一個文件，那么當用戶訪問了一個網(wǎng)頁，加載了這個公共文件，再訪問其他依賴公共文件的網(wǎng)頁時，就直接使用文件在瀏覽器的緩存，這樣公共文件就只用被傳輸一次。

entry: {vendor: ["jquery", "other-lib"], // 明確第三方庫app: "./entry"},plugins: [new webpack.optimize.CommonsChunkPlugin({name: "vendor",// filename: "vendor.js"// (給 chunk 一個不同的名字)minChunks: Infinity,// (隨著 entry chunk 越來越多，// 這個配置保證沒其它的模塊會打包進 vendor chunk)})]// 打包后的文件<script src="vendor.js" charset="utf-8"></script><script src="app.js" charset="utf-8"></script> 復制代碼

UglifyJSPlugin

基本上腳手架都包含了該插件,該插件會分析JS代碼語法樹，理解代碼的含義，從而做到去掉無效代碼、去掉日志輸入代碼、縮短變量名等優(yōu)化。

const UglifyJSPlugin = require('webpack/lib/optimize/UglifyJsPlugin');//...plugins: [new UglifyJSPlugin({compress: {warnings: false, //刪除無用代碼時不輸出警告drop_console: true, //刪除所有console語句，可以兼容IEcollapse_vars: true, //內(nèi)嵌已定義但只使用一次的變量reduce_vars: true, //提取使用多次但沒定義的靜態(tài)值到變量},output: {beautify: false, //最緊湊的輸出，不保留空格和制表符comments: false, //刪除所有注釋}})] 復制代碼

ExtractTextPlugin + PurifyCSSPlugin

ExtractTextPlugin 從 bundle 中提取文本（CSS）到單獨的文件，PurifyCSSPlugin純化CSS（其實用處沒多大）

module.exports = {module: {rules: [{test: /\.css$/,loader: ExtractTextPlugin.extract({fallback: 'style-loader',use: [{loader: 'css-loader',options: {localIdentName: 'purify_[hash:base64:5]',modules: true}}]})}]},plugins: [...,new PurifyCSSPlugin({purifyOptions: {whitelist: ['*purify*']}})]}; 復制代碼

DefinePlugin

DefinePlugin能夠自動檢測環(huán)境變化，效率高效。

在前端開發(fā)中，在不同的應(yīng)用環(huán)境中，需要不同的配置。如：開發(fā)環(huán)境的API Mocker、測試流程中的數(shù)據(jù)偽造、打印調(diào)試信息。如果使用人工處理這些配置信息，不僅麻煩，而且容易出錯。

使用DefinePlugin配置的全局常量

注意，因為這個插件直接執(zhí)行文本替換，給定的值必須包含字符串本身內(nèi)的實際引號。通常，有兩種方式來達到這個效果，使用 ' "production" ', 或者使用 JSON.stringify('production')。

new webpack.DefinePlugin({// 當然，在運行node服務(wù)器的時候就應(yīng)該按環(huán)境來配置文件// 下面模擬的測試環(huán)境運行配置'process.env':JSON.stringify('dev'),WP_CONF: JSON.stringify('dev'),}), 復制代碼

測試DefinePlugin：編寫

if (WP_CONF === 'dev') {console.log('This is dev');} else {console.log('This is prod');} 復制代碼

打包后WP_CONF === 'dev'會編譯為false

if (false) {console.log('This is dev');} else {console.log('This is prod');} 復制代碼

清除不可達代碼

當使用了DefinePlugin插件后，打包后的代碼會有很多冗余。可以通過UglifyJsPlugin清除不可達代碼。

[new UglifyJsPlugin({uglifyOptions: {compress: {warnings: false, // 去除warning警告dead_code: true, // 去除不可達代碼},warnings: false}})] 復制代碼

最后的打包打包代碼會變成console.log('This is prod')

附Uglify文檔：github.com/mishoo/Ugli…

使用DefinePlugin區(qū)分環(huán)境 + UglifyJsPlugin清除不可達代碼，以減輕打包代碼體積

HappyPack

HappyPack可以開啟多進程Loader轉(zhuǎn)換，將任務(wù)分解給多個子進程，最后將結(jié)果發(fā)給主進程。

使用

exports.plugins = [new HappyPack({id: 'jsx',threads: 4,loaders: [ 'babel-loader' ]}),new HappyPack({id: 'styles',threads: 2,loaders: [ 'style-loader', 'css-loader', 'less-loader' ]})];exports.module.rules = [{test: /\.js$/,use: 'happypack/loader?id=jsx'},{test: /\.less$/,use: 'happypack/loader?id=styles'},] 復制代碼

ParallelUglifyPlugin

ParallelUglifyPlugin可以開啟多進程壓縮JS文件

import ParallelUglifyPlugin from 'webpack-parallel-uglify-plugin';module.exports = {plugins: [new ParallelUglifyPlugin({test,include,exclude,cacheDir,workerCount,sourceMap,uglifyJS: {},uglifyES: {}}),],}; 復制代碼

BundleAnalyzerPlugin

webpack打包結(jié)果分析插件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {plugins: [new BundleAnalyzerPlugin()]} 復制代碼

test & include & exclude

減小文件搜索范圍，從而提升速度

示例

{test: /\.css$/,include: [path.resolve(__dirname, "app/styles"),path.resolve(__dirname, "vendor/styles")]} 復制代碼

外部擴展(externals)

這玩意不是插件，是wenpack的配置選項

externals 配置選項提供了「從輸出的 bundle 中排除依賴」的方法。相反，所創(chuàng)建的 bundle 依賴于那些存在于用戶環(huán)境(consumer's environment)中的依賴。此功能通常對 library 開發(fā)人員來說是最有用的，然而也會有各種各樣的應(yīng)用程序用到它。

entry: {entry: './src/main.js',vendor: ['vue', 'vue-router', 'vuex']},externals: {// 從輸出的 bundle 中排除 echarts 依賴echarts: 'echarts',} 復制代碼

Webpack HMR 原理解析

Hot Module Replacement（簡稱 HMR)

包含以下內(nèi)容：

熱更新圖

熱更新步驟講解

第一步：webpack 對文件系統(tǒng)進行 watch 打包到內(nèi)存中

webpack-dev-middleware 調(diào)用 webpack 的 api 對文件系統(tǒng) watch，當文件發(fā)生改變后，webpack 重新對文件進行編譯打包，然后保存到內(nèi)存中。

webpack 將 bundle.js 文件打包到了內(nèi)存中，不生成文件的原因就在于訪問內(nèi)存中的代碼比訪問文件系統(tǒng)中的文件更快，而且也減少了代碼寫入文件的開銷。

這一切都歸功于memory-fs，memory-fs 是 webpack-dev-middleware 的一個依賴庫，webpack-dev-middleware 將 webpack 原本的 outputFileSystem 替換成了MemoryFileSystem 實例，這樣代碼就將輸出到內(nèi)存中。

webpack-dev-middleware 中該部分源碼如下:

// compiler// webpack-dev-middleware/lib/Shared.jsvar isMemoryFs = !compiler.compilers &&compiler.outputFileSystem instanceof MemoryFileSystem;if(isMemoryFs) {fs = compiler.outputFileSystem;} else {fs = compiler.outputFileSystem = new MemoryFileSystem();} 復制代碼

第二步：devServer 通知瀏覽器端文件發(fā)生改變

在啟動 devServer 的時候，sockjs 在服務(wù)端和瀏覽器端建立了一個 webSocket 長連接，以便將 webpack 編譯和打包的各個階段狀態(tài)告知瀏覽器，最關(guān)鍵的步驟還是 webpack-dev-server 調(diào)用 webpack api 監(jiān)聽 compile的 done 事件，當compile 完成后，webpack-dev-server通過 _sendStatus 方法將編譯打包后的新模塊 hash 值發(fā)送到瀏覽器端。

// webpack-dev-server/lib/Server.jscompiler.plugin('done', (stats) => {// stats.hash 是最新打包文件的 hash 值this._sendStats(this.sockets, stats.toJson(clientStats));this._stats = stats;});...Server.prototype._sendStats = function (sockets, stats, force) {if (!force && stats &&(!stats.errors || stats.errors.length === 0) && stats.assets &&stats.assets.every(asset => !asset.emitted)) { return this.sockWrite(sockets, 'still-ok'); }// 調(diào)用 sockWrite 方法將 hash 值通過 websocket 發(fā)送到瀏覽器端this.sockWrite(sockets, 'hash', stats.hash);if (stats.errors.length > 0) { this.sockWrite(sockets, 'errors', stats.errors); } else if (stats.warnings.length > 0) { this.sockWrite(sockets, 'warnings', stats.warnings); } else { this.sockWrite(sockets, 'ok'); }}; 復制代碼

第三步：webpack-dev-server/client 接收到服務(wù)端消息做出響應(yīng)

webpack-dev-server 修改了webpack 配置中的 entry 屬性，在里面添加了 webpack-dev-client 的代碼，這樣在最后的 bundle.js 文件中就會接收 websocket 消息的代碼了。

webpack-dev-server/client 當接收到 type 為 hash 消息后會將 hash 值暫存起來，當接收到 type 為 ok 的消息后對應(yīng)用執(zhí)行 reload 操作。

在 reload 操作中，webpack-dev-server/client 會根據(jù) hot 配置決定是刷新瀏覽器還是對代碼進行熱更新（HMR）。代碼如下：

// webpack-dev-server/client/index.jshash: function msgHash(hash) {currentHash = hash;},ok: function msgOk() {// ...reloadApp();},// ...function reloadApp() {// ...if (hot) {log.info('[WDS] App hot update...');const hotEmitter = require('webpack/hot/emitter');hotEmitter.emit('webpackHotUpdate', currentHash);// ...} else {log.info('[WDS] App updated. Reloading...');self.location.reload();}} 復制代碼

第四步：webpack 接收到最新 hash 值驗證并請求模塊代碼

首先 webpack/hot/dev-server（以下簡稱 dev-server） 監(jiān)聽第三步 webpack-dev-server/client 發(fā)送的 webpackHotUpdate 消息，調(diào)用 webpack/lib/HotModuleReplacement.runtime（簡稱 HMR runtime）中的 check 方法，檢測是否有新的更新。

在 check 過程中會利用 webpack/lib/JsonpMainTemplate.runtime（簡稱 jsonp runtime）中的兩個方法 hotDownloadManifest 和 hotDownloadUpdateChunk。

hotDownloadManifest 是調(diào)用 AJAX 向服務(wù)端請求是否有更新的文件，如果有將發(fā)更新的文件列表返回瀏覽器端。該方法返回的是最新的 hash 值。

hotDownloadUpdateChunk 是通過 jsonp 請求最新的模塊代碼，然后將代碼返回給 HMR runtime，HMR runtime 會根據(jù)返回的新模塊代碼做進一步處理，可能是刷新頁面，也可能是對模塊進行熱更新。該 方法返回的就是最新 hash 值對應(yīng)的代碼塊。

最后將新的代碼塊返回給 HMR runtime，進行模塊熱更新。

附：為什么更新模塊的代碼不直接在第三步通過 websocket 發(fā)送到瀏覽器端，而是通過 jsonp 來獲取呢？

我的理解是，功能塊的解耦，各個模塊各司其職，dev-server/client 只負責消息的傳遞而不負責新模塊的獲取，而這些工作應(yīng)該有 HMR runtime 來完成，HMR runtime 才應(yīng)該是獲取新代碼的地方。再就是因為不使用 webpack-dev-server 的前提，使用 webpack-hot-middleware 和 webpack 配合也可以完成模塊熱更新流程，在使用 webpack-hot-middleware 中有件有意思的事，它沒有使用 websocket，而是使用的 EventSource。綜上所述，HMR 的工作流中，不應(yīng)該把新模塊代碼放在 websocket 消息中。

第五步：HotModuleReplacement.runtime 對模塊進行熱更新

這一步是整個模塊熱更新（HMR）的關(guān)鍵步驟，而且模塊熱更新都是發(fā)生在HMR runtime 中的 hotApply 方法中

// webpack/lib/HotModuleReplacement.runtimefunction hotApply() {// ...var idx;var queue = outdatedModules.slice();while(queue.length > 0) {moduleId = queue.pop();module = installedModules[moduleId];// ...// remove module from cachedelete installedModules[moduleId];// when disposing there is no need to call dispose handlerdelete outdatedDependencies[moduleId];// remove "parents" references from all childrenfor(j = 0; j < module.children.length; j++) {var child = installedModules[module.children[j]];if(!child) continue;idx = child.parents.indexOf(moduleId);if(idx >= 0) {child.parents.splice(idx, 1);}}}// ...// insert new codefor(moduleId in appliedUpdate) {if(Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) {modules[moduleId] = appliedUpdate[moduleId];}}// ...} 復制代碼

模塊熱更新的錯誤處理，如果在熱更新過程中出現(xiàn)錯誤，熱更新將回退到刷新瀏覽器，這部分代碼在 dev-server 代碼中，簡要代碼如下：

module.hot.check(true).then(function(updatedModules) {if(!updatedModules) {return window.location.reload();}// ...}).catch(function(err) {var status = module.hot.status();if(["abort", "fail"].indexOf(status) >= 0) {window.location.reload();}}); 復制代碼

第六步：業(yè)務(wù)代碼需要做些什么？

當用新的模塊代碼替換老的模塊后，但是我們的業(yè)務(wù)代碼并不能知道代碼已經(jīng)發(fā)生變化，也就是說，當 hello.js 文件修改后，我們需要在 index.js 文件中調(diào)用 HMR 的 accept 方法，添加模塊更新后的處理函數(shù)，及時將 hello 方法的返回值插入到頁面中。代碼如下

// index.jsif(module.hot) {module.hot.accept('./hello.js', function() {div.innerHTML = hello()})} 復制代碼

最后

覺得有用的請點個贊

本文內(nèi)容出自 github.com/zhongmeizhi…

歡迎關(guān)注公眾號「前端進階課」認真學前端，一起進階。

總結(jié)

以上是生活随笔為你收集整理的这可能是最通俗易懂的 webpack 知识全景图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。