這些天，畢業那點事，到現在終於能騰出空來了。

今天Eknow想總結的是自身所掌握的webpack知識以及對webpack的一些見解。

先來看一下github對webpack的相關介紹

簡單的來講呢，就是webpack是js的一款打包工具，主要的特性是code Splitting（程式碼分割），可以將很多模組打包成較少的靜態資源，同時它的核心是loaders，可以將各種格式檔案，例如.vue，.jsx等，打包成瀏覽器可以識別的檔案。

（一）安裝與命令

要學習webpack之前，得需要掌握安裝方式以及一些常用的命令。

首先，在專案裡進行區域性安裝，由於webpack4x版本有一些改動，之後會獨立一篇文章進行比較總結。因此現在掌握這個命令即可。

接著，就可以使用webpack命令了。

1、使用命令webpack xx原始檔  xx打包檔案，就可以自動生成編譯打包後的檔案。

2、webpack對css的打包編譯。首先，需要下載依賴包style-loader、css-loader（對樣式的編譯）

有2種方式進行webpack對css的使用：

第一，使用require引用css路徑前，引入style-loader與css-loader。

第二，使用webpack的相關命令--module-bind對style-loader與css-loader的呼叫。

其他命令：

webpack hello.js hello.bundle.js --progress 顯示打包的過程；

webpack hello.js hello.bundle.js --display-modules顯示打包的模組；

webpack hello.js hello.bundle.js --display-resons 顯示打包的原因。

（二）單頁面應用配置

核心概念：entry入口，output輸出，html-webpack-plugin（https://www.npmjs.com/package/html-webpack-plugin）。

entry設定單個入口或者多個入口起點，

output的path與filename屬性分別對主檔案以及入口起點的編譯打包。

引用path模組對index.html以及js檔案都打包在dist資料夾裡面；pubicPath用於指定路徑的靜態資源。

編譯打包的結果：

html-webpack-plugin對index.html進行優化處理。

首先，npm i 這個webpack的外掛，

接著require賦值給一個變數，

之後，在plugins外掛裡，進行初始化變數

在初始化中，可以配置多個引數以及自定義變數，例如inject；也可以進行自定義變數，如title、date等，在index.html頁面中，像ejs模板引擎一樣引用出來即可

另外，在package.json檔案裡，對scripts進行webpack的配置。

執行npm run webpack

編譯成功後，即可查閱dist資料夾裡面的index.html頁面。結果如下：

（三）多頁面應用配置

在webpack.config.js的entry裡，配置多個入口檔案，例a.js，b.js，c.js檔案。

而output對多個檔案進行輸出

核心的步驟，需要在plugins外掛裡面，進行多次htmlWebpackPlugin變數的初始化，以index.html作為模板檔案，分別輸出三個html頁面。同時，使用excludeChunks屬性對相應的js檔案進行引用。

（四）效能優化

由於需要將打包的效能做到極致，因此需要將初始化的共同檔案直接引用出來，減少http請求。呼叫webpack原始碼裡面的compilation.assets，同時引用htmlWebpackPlugin裡面的files物件，從而將main.js直接引用出來；另外通過遍歷htmlWebpackPlugin.files.chunks,判斷key值是否為main，從而進行引用各個頁面所需要的不同js檔案。

https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade

此時，在dist資料夾下面的a.html，b.html，c.html裡，將main.js的程式碼直接引入，同時呼叫相對應頁面的js檔案資源。

總結：到此，webpack基礎的使用方式已經結束。這篇文章，主要分析了單頁面應用與多頁面應用的部分配置，以及對entry、output、plugin等概念進行運用。

另外，此webpack的版本是3x，4x版本在2月份已經有一些區別。

更多文章請關注公眾號