npx＝>0配置，webpack4.0＋

願你能遇到一個城市，容得下你盡情嬉鬧。

前言

webpack是非常流行的模塊打包工具，而且現在有webpack配置工程師這一職業，隨著webpack版本的更新，從webpack3.0到webpack4.0+遷移項目會有很多坑，當然今天不是聊這些坑的，今天主要是重新溫習一下webpack配置以及一些功能。

webpack是什麼

webpack主要功能就是分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。

主要功能包括：

代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等。

文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合併圖片等。

代碼分割：提取多個頁面的公共代碼、提取首屏不需要執行部分的代碼讓其非同步載入。

模塊合併：在採用模塊化的項目里會有很多個模塊和文件，需要構建功能把模塊分類合併成一個文件。

自動刷新：監聽本地源代碼的變化，自動重新構建、刷新瀏覽器。

代碼校驗：在代碼被提交到倉庫前需要校驗代碼是否符合規範，以及單元測試是否通過。

自動發布：更新完代碼後，自動構建出線上發布代碼並傳輸給發布系統。

npx是什麼

webpack4.0+以上推存0配置，而且webpack也一直朝著這個方向發展。webpack4.0+添加了一個webpack-cli；

npx是一個執行npm軟體包的二進位文件，通俗的講，他可以執行npm的一些指令，比如npx webpack 他會執行node_modules下面的bin下的webpack.cmd文件，如果沒有安裝webpack的話，它會自動安裝。但是node版本不低於8.6，npm版本不低於5.2。

npx可以通過npm下載。webpack所說的0配置就是與他相關。當然npx還有很多功能，你可以移駕到npm官網上查看npx。

webpack主要配置

webpack零配置都是執行的默認配置，功能很差，這也導致很多人沒聽過npx。一般情況下我們都需要自己配置webpack。

webpack主要配置有entry、output、devServer、module、plugins、mode、resolve。

1、如何配置開發伺服器？

需要安裝一個webpack-dev-server。

在package.json中我們可以配置scripts來指定運行指令，我們通過npm run start來運行這個文件。伺服器配置會把我們打包的build.js放在內存中，也就是我們在文件目錄下看不到build.js.當我們npm run build 才可以看到。

contentBase是配置伺服器運行是的根目錄，默認是/，我們可以指定，比如我們在build文件夾建立一個a.json,我們可以在瀏覽器下面打開a.json;

port是埠號;

compress是伺服器體積壓縮;

open是自動打開瀏覽器;

hot是熱更新。

2、將html打包到build下，並自動引入生產的js。

html-webpack-plugin會幫我們完成，我們只需在src下建立一個html文件。在配置文件中配置plugins;

html-webpack-plugin接受一個對象options。 常用的配置參數有template（模板路勁）、title（html中title標籤需採用ejs寫法）、minify（壓縮方法）、hash（清除緩衝，我們也可以通過在output中設置build.[hash:8].js）。

3、清理打包文件、配置多入口和多頁。

每次打包都會生成build文件，當我們再一次打包就會報錯，所以我們需要引入clean-webpack-plugin來清理build文件。

entry可以是一個數組，可以在生成的html中引入兩個js文件。同時entry也可以是一個對象，但是要生成多頁面我們還需要再 new一個HtmWebpackPlugin，它需要添加一個屬性chunks，表示引入的js。還需要注意的一點就是我們需要把輸出文件output的filename設置成[name]。否則就會報錯。

4、解析、抽離css文件，分離多個css文件

打包css文件，我們會用到style-loader（解析css，變成style標籤插進html）、css-loader（把css變成一個模塊，插到style便簽）、less-loader、less、stylus、stylus-loader、node-sass、sass-loader等等。

抽離css文件，通過link的方式引入。我們會用到extract-text-webpack-plugin@next，新版本加了一個@next，是比較穩定的；webpack還新提供了一個mini-css-extract-plugin，這個插件有望取代extract-text-webpack-plugin。但是目前還不穩定。

下載好以後，我們在plugins中添加插件，配置filename（抽離的css文件名），在loader中修改use；

如果不想打包到一個css文件中，我們可以分離它，我們可以分3步，①、分別new一個實例；②、在module中分別配置相對應的插件；③、在plugins中引入。打包之後我們就會看到css下就會有兩個css文件。

但同樣它會出現一個問題，就是在不會熱更新了，上面是上線環境用的，開發環境我們需要重新配置，只需要兩步，這樣他就不會以link的方式，而是以style的方式插入html中。

上面說的是 extract-text-webpack-plugin@next，而 mini-css-extract-plugin的用法簡單，但是它的缺點就是不能分離打包。只能打包成一個css文件。

它的用法與上面不同的是，只需在use中添加一個MiniCssTractPlugin.loader；

5、清除沒用的css。

如果我們引入框架的樣式庫，比如bootstrap、mui等等UI庫，會用很多用不到樣式，我們可以用purifycss-webpack 、purify-css、glob插件去清除；用法也簡單。一般情況下，我們放在HtmlWebpackPlugin後面。

6、原封不動的發布一個文件到線上，拷貝插件；

如果我們有這樣的需求，我們想要把一個文件原封不動的拷貝到打包的build文件中，我們會用到copy-webpack-plugin插件，它接受一個數組，可以拷貝多個文件或文件夾，數組中是多個對象，對象中常用的參數有from和to。

結語

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！