目錄

1.mode

2.devtool

3.entry

4.output

---

webpack提供的 CLI 支持很多的參數，例如 --mode，但更多時候我們會使用配置文件來控制webpack的行為。默認情況下，webpack會讀取webpack.config.js 文件作為配置文件，但也可以通過 CLI 參數 --config 來指定某個配置文件。配置文件中通過CommonJS模塊導出一個對象，對象中的各種屬性對應不同的webpack配置，例子如下：

module.exports = {//在這里添加配置對象 }

【注】

1）配置文件中的代碼，必須是有效的node代碼

2）當命令行參數與配置文件中的配置出現沖突時，以命令行參數為準

1.mode

編譯模式，字符串，取值為development或production，指定編譯結果代碼運行的環境，會影響webpack對編譯結果代碼格式的處理

2.devtool

控制是否生成且如何生成source map(源碼地圖)，具體配置請點擊這里

【擴展】源碼地圖

A）概念：前端發展到現階段，很多時候不會直接運行源代碼，可能需要對源代碼進行合并、壓縮、轉換等操作，真正運行的是轉換后的代碼。這就給調試帶來了困難，因為當運行發生錯誤的時候，我們更加希望能看到源代碼中的錯誤，而不是轉換后代碼的錯誤。為了解決這一問題，chrome瀏覽器率先支持了source map，其他瀏覽器紛紛效仿，目前，幾乎所有的新版瀏覽器都支持了source map。source map實際上是一個配置，配置中不僅記錄了所有源碼內容，還記錄了和轉換后的代碼的對應關系。

B）最佳實踐：source map應在開發環境中使用，作為一種調試手段，不應該在生產環境中使用。source map的文件一般較大，不僅會導致額外的網絡傳輸，還容易暴露原始代碼。即便要在生產環境中使用source map，用于調試真實的代碼運行問題，也要做出一些處理規避網絡傳輸和代碼暴露的問題

3.entry

該配置指定文件入口，配置的屬性名為chunk名稱，其值為指定文件的路徑(入口模塊)。一個entry對象中可以包含多個chunk，一個chunk也可以包含多個入口模塊，代碼如下

module.exports = {mode: "production",entry: {main: "./src/index.js", //屬性名：chunk的名稱， 屬性值：入口模塊（啟動模塊）a: ["./src/a.js", "./src/index.js"] //啟動模塊有兩個},devtool: "source-map" }

4.output

指定編譯結果文件，這個配置中包含很多屬性，最重要的是 path 和 filename，path 的屬性值為打包后文件的路徑，一般使用node的內置模塊 path 的 path.resolve()?方法來搞定路徑問題，如果不清楚，請戳這里。filename決定了我們打包好的文件名稱，由于打包過程中，可能生成多個文件，因此這里的命名不能簡單的直接指定命名，而是可以采用計算出文件名的方法，有以下幾個規則

• name：chunkname
• hash：總的資源hash，因為當改變文件內容時，hash值會跟著變化，所以通常用于解決緩存問題，防止因文件內容改變而文件名沒有發生變化時，瀏覽器不重新請求資源的情況。
• chunkhash：使用chunkhash
• id：使用chunkid，因為其在生產環境為以0開頭的數字，而在開發環境為入口文件的文件名，所以不推薦

舉個例子來看看怎么配置該屬性叭

var path = require("path") module.exports = {mode: "development",entry: {main: "./src/index.js", //屬性名：chunk的名稱， 屬性值：入口模塊（啟動模塊）a: ["./src/a.js", "./src/index.js"] //啟動模塊有兩個},output: {path: path.resolve(__dirname, "target"), //必須配置一個絕對路徑，表示資源放置的文件夾，默認是distfilename: "[name].[chunkhash:5].js" //配置的合并的js文件的規則，chunkhash：5表示只取chunkhash的前5位},devtool: "source-map" }

【結果】生成的文件如下圖，其中后綴位map的文件是源碼地圖

?還有兩個重要的配置，loader和plugin，單獨來說

?

總結

以上是生活随笔為你收集整理的webpack文件配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。