目錄

1.mode

2.devtool

3.entry

4.output

---

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

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

【注】

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

2）當(dāng)命令行參數(shù)與配置文件中的配置出現(xiàn)沖突時(shí)，以命令行參數(shù)為準(zhǔn)

1.mode

編譯模式，字符串，取值為development或production，指定編譯結(jié)果代碼運(yùn)行的環(huán)境，會(huì)影響webpack對(duì)編譯結(jié)果代碼格式的處理

2.devtool

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

【擴(kuò)展】源碼地圖

A）概念：前端發(fā)展到現(xiàn)階段，很多時(shí)候不會(huì)直接運(yùn)行源代碼，可能需要對(duì)源代碼進(jìn)行合并、壓縮、轉(zhuǎn)換等操作，真正運(yùn)行的是轉(zhuǎn)換后的代碼。這就給調(diào)試帶來了困難，因?yàn)楫?dāng)運(yùn)行發(fā)生錯(cuò)誤的時(shí)候，我們更加希望能看到源代碼中的錯(cuò)誤，而不是轉(zhuǎn)換后代碼的錯(cuò)誤。為了解決這一問題，chrome瀏覽器率先支持了source map，其他瀏覽器紛紛效仿，目前，幾乎所有的新版瀏覽器都支持了source map。source map實(shí)際上是一個(gè)配置，配置中不僅記錄了所有源碼內(nèi)容，還記錄了和轉(zhuǎn)換后的代碼的對(duì)應(yīng)關(guān)系。

B）最佳實(shí)踐：source map應(yīng)在開發(fā)環(huán)境中使用，作為一種調(diào)試手段，不應(yīng)該在生產(chǎn)環(huán)境中使用。source map的文件一般較大，不僅會(huì)導(dǎo)致額外的網(wǎng)絡(luò)傳輸，還容易暴露原始代碼。即便要在生產(chǎn)環(huán)境中使用source map，用于調(diào)試真實(shí)的代碼運(yùn)行問題，也要做出一些處理規(guī)避網(wǎng)絡(luò)傳輸和代碼暴露的問題

3.entry

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

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

4.output

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

• name：chunkname
• hash：總的資源hash，因?yàn)楫?dāng)改變文件內(nèi)容時(shí)，hash值會(huì)跟著變化，所以通常用于解決緩存問題，防止因文件內(nèi)容改變而文件名沒有發(fā)生變化時(shí)，瀏覽器不重新請(qǐng)求資源的情況。
• chunkhash：使用chunkhash
• id：使用chunkid，因?yàn)槠湓谏a(chǎn)環(huán)境為以0開頭的數(shù)字，而在開發(fā)環(huán)境為入口文件的文件名，所以不推薦

舉個(gè)例子來看看怎么配置該屬性叭

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

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

?還有兩個(gè)重要的配置，loader和plugin，單獨(dú)來說

?

總結(jié)

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

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