摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。參數(shù)用來表示本配置僅針對(duì)哪些目錄文件，該值應(yīng)是一個(gè)條件值。示例代碼諸位看本系列文章，搭配我在上的腳手架項(xiàng)目食用更佳哦笑。

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000006863968
如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang

webpack的配置文件是一個(gè)node.js的module，用CommonJS風(fēng)格來書寫，形如：

module.exports = {
    entry: "./entry",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    }
}

webpack的配置文件并沒有固定的命名，也沒有固定的路徑要求，如果你直接用webpack來執(zhí)行編譯，那么webpack默認(rèn)讀取的將是當(dāng)前目錄下的webpack.config.js

$ pwd
/d/xampp/htdocs/webpack-seed
$ webpack # webpack此時(shí)讀取的實(shí)際上是/d/xampp/htdocs/webpack-seed/webpack.config.js

如果你有其它命名的需要或是你有多份配置文件，可以使用--config參數(shù)傳入路徑：

$ webpack --config ./webpackConfig/dev.config.js

另外，在CLI執(zhí)行webpack指令時(shí)可傳入的參數(shù)（當(dāng)然除了--config）實(shí)際上都可以在配置文件里面直接聲明，我強(qiáng)烈建議可以的話盡量都在配置文件里寫好，有需要的話寫兩份配置也好三份也好（反正配置文件間也是可以互相引用的，相同的部分就拆成一個(gè)module出來以供讀取，最后拼成各種情況下需要的配置就好了）。

entry可以是字符串（單入口），可以是數(shù)組（多入口），但為了后續(xù)發(fā)展，請(qǐng)務(wù)必使用object，因?yàn)閛bject中的key在webpack里相當(dāng)于此入口的name，既可以后續(xù)用來拼生成文件的路徑，也可以用來作為此入口的唯一標(biāo)識(shí)。
我推薦的形式是這樣的：

entry: { // pagesDir是前面準(zhǔn)備好的入口文件集合目錄的路徑
  "alert/index": path.resolve(pagesDir, `./alert/index/page`), 
  "index/login": path.resolve(pagesDir, `./index/login/page`), 
  "index/index": path.resolve(pagesDir, `./index/index/page`),
},

對(duì)照我的腳手架項(xiàng)目webpack-seed的文件目錄結(jié)構(gòu)，就很清楚了：

├─src # 當(dāng)前項(xiàng)目的源碼
    ├─pages # 各個(gè)頁面獨(dú)有的部分，如入口文件、只有該頁面使用到的css、模板文件等
    │  ├─alert # 業(yè)務(wù)模塊
    │  │  └─index # 具體頁面
    │  ├─index # 業(yè)務(wù)模塊
    │  │  ├─index # 具體頁面
    │  │  └─login # 具體頁面

由于每一個(gè)入口文件都相當(dāng)于entry里的一項(xiàng)，因此這樣一項(xiàng)一項(xiàng)地來寫實(shí)在是有點(diǎn)繁瑣，我就稍微寫了點(diǎn)代碼來拼接這entry：

  var pageArr = [
    "index/login",
    "index/index",
    "alert/index",
  ];
  var configEntry = {};
  pageArr.forEach((page) => {
    configEntry[page] = path.resolve(pagesDir, page + "/page");
  });

output參數(shù)告訴webpack以什么方式來生成/輸出文件，值得注意的是，與entry不同，output相當(dāng)于一套規(guī)則，所有的入口都必須使用這一套規(guī)則，不能針對(duì)某一個(gè)特定的入口來制定output規(guī)則。output參數(shù)里有這幾個(gè)子參數(shù)是比較常用的：path、publicPath、filename、chunkFilename，這里先給個(gè)webpack-seed中的示例：

    output: {
      path: buildDir, // var buildDir = path.resolve(__dirname, "./build");
      publicPath: "../../../../build/",
      filename: "[name]/entry.js",    // [name]表示entry每一項(xiàng)中的key，用以批量指定生成后文件的名稱
      chunkFilename: "[id].bundle.js",
    },

path參數(shù)表示生成文件的根目錄，需要傳入一個(gè)絕對(duì)路徑。path參數(shù)和后面的filename參數(shù)共同組成入口文件的完整路徑。

publicPath參數(shù)表示的是一個(gè)URL路徑（指向生成文件的根目錄），用于生成css/js/圖片/字體文件等資源的路徑，以確保網(wǎng)頁能正確地加載到這些資源。
publicPath參數(shù)跟path參數(shù)的區(qū)別是：path參數(shù)其實(shí)是針對(duì)本地文件系統(tǒng)的，而publicPath則針對(duì)的是瀏覽器；因此，publicPath既可以是一個(gè)相對(duì)路徑，如示例中的"../../../../build/"，也可以是一個(gè)絕對(duì)路徑如http://www.xxxxx.com/。一般來說，我還是更推薦相對(duì)路徑的寫法，這樣的話整體遷移起來非常方便。那什么時(shí)候用絕對(duì)路徑呢？其實(shí)也很簡單，當(dāng)你的html文件跟其它資源放在不同的域名下的時(shí)候，就應(yīng)該用絕對(duì)路徑了，這種情況非常多見于后端渲染模板的場景。

filename屬性表示的是如何命名生成出來的入口文件，規(guī)則有以下三種：

[name]，指代入口文件的name，也就是上面提到的entry參數(shù)的key，因此，我們可以在name里利用/，即可達(dá)到控制文件目錄結(jié)構(gòu)的效果。

[hash]，指代本次編譯的一個(gè)hash版本，值得注意的是，只要是在同一次編譯過程中生成的文件，這個(gè)[hash]的值就是一樣的；在緩存的層面來說，相當(dāng)于一次全量的替換。

[chunkhash]，指代的是當(dāng)前chunk的一個(gè)hash版本，也就是說，在同一次編譯中，每一個(gè)chunk的hash都是不一樣的；而在兩次編譯中，如果某個(gè)chunk根本沒有發(fā)生變化，那么該chunk的hash也就不會(huì)發(fā)生變化。這在緩存的層面上來說，就是把緩存的粒度精細(xì)到具體某個(gè)chunk，只要chunk不變，該chunk的瀏覽器緩存就可以繼續(xù)使用。

下面來說說如何利用filename參數(shù)和path參數(shù)來設(shè)計(jì)入口文件的目錄結(jié)構(gòu)，如示例中的path: buildDir, // var buildDir = path.resolve(__dirname, "./build");和filename: "[name]/entry.js"，那么對(duì)于key為"index/login"的入口文件，生成出來的路徑就是build/index/login/entry.js了，怎么樣，是不是很簡單呢？

chunkFilename參數(shù)與filename參數(shù)類似，都是用來定義生成文件的命名方式的，只不過，chunkFilename參數(shù)指定的是除入口文件外的chunk（這些chunk通常是由于webpack對(duì)代碼的優(yōu)化所形成的，比如因應(yīng)實(shí)際運(yùn)行的情況來異步加載）的命名。

webpack的核心實(shí)際上也只能針對(duì)js進(jìn)行打包，那webpack一直號(hào)稱能夠打包任何資源是怎么一回事呢？原來，webpack擁有一個(gè)類似于插件的機(jī)制，名為Loader，通過Loader，webpack能夠針對(duì)每一種特定的資源做出相應(yīng)的處理。Loader的種類相當(dāng)多，有些比較基礎(chǔ)的是官方自己開發(fā)，而其它則是由webpack社區(qū)開源貢獻(xiàn)出來的，這里是Loader的List：list of loaders。
而module正是配置什么資源使用哪個(gè)Loader的參數(shù)（因?yàn)榫退闶峭环N資源，也可能有不同的Loader可以使用，當(dāng)然不同Loader處理的手段不一樣，最后結(jié)果也自然就不一樣了）。module參數(shù)有幾個(gè)子參數(shù)，但是最常用的自然還是loaders子參數(shù)，這里也僅對(duì)loaders子參數(shù)進(jìn)行介紹。

loaders參數(shù)又有幾個(gè)子參數(shù)，先給出一個(gè)官方示例：

module.loaders: [
  {
    // "test" is commonly used to match the file extension
    test: /.jsx$/,

    // "include" is commonly used to match the directories
    include: [
      path.resolve(__dirname, "app/src"),
      path.resolve(__dirname, "app/test")
    ],

    // "exclude" should be used to exclude exceptions
    // try to prefer "include" when possible

    // the "loader"
    loader: "babel-loader"
  }
]

下面一一對(duì)這些子參數(shù)進(jìn)行說明：

test參數(shù)用來指示當(dāng)前配置項(xiàng)針對(duì)哪些資源，該值應(yīng)是一個(gè)條件值(condition)。

exclude參數(shù)用來剔除掉需要忽略的資源，該值應(yīng)是一個(gè)條件值(condition)。

include參數(shù)用來表示本loader配置僅針對(duì)哪些目錄/文件，該值應(yīng)是一個(gè)條件值(condition)。這個(gè)參數(shù)跟test參數(shù)的效果是一樣的（官方文檔也是這么寫的），我也不明白為嘛有倆同樣規(guī)則的參數(shù)，不過我們姑且可以自己來劃分這兩者的用途：test參數(shù)用來指示文件名（包括文件后綴），而include參數(shù)則用來指示目錄；注意同時(shí)使用這兩者的時(shí)候，實(shí)際上是and的關(guān)系。

loader/loaders參數(shù)，用來指示用哪個(gè)/哪些loader來處理目標(biāo)資源，這倆貨表達(dá)的其實(shí)是一個(gè)意思，只是寫法不一樣，我個(gè)人推薦用loader寫成一行，多個(gè)loader間使用!分割，這種形式類似于管道的概念，又或者說是函數(shù)式編程。形如loader: "css?!postcss!less"，可以很明顯地看出，目標(biāo)資源先經(jīng)less-loader處理過后將結(jié)果交給postcss-loader作進(jìn)一步處理，然后最后再交給css-loader。

條件值(condition)可以是一個(gè)字符串（某個(gè)資源的文件系統(tǒng)絕對(duì)路徑），可以是一個(gè)函數(shù)（官方文檔里是有這么寫，但既沒有示例也沒有說明，我也是醉了），可以是一個(gè)正則表達(dá)式（用來匹配資源的路徑，最常用，強(qiáng)烈推薦?。詈?，還可以是一個(gè)數(shù)組，數(shù)組的元素可以為上述三種類型，元素之間為與關(guān)系（既必須同時(shí)滿足數(shù)組里的所有條件）。需要注意的是，loader是可以接受參數(shù)的，方式類似于URL參數(shù)，形如"css?minimize&-autoprefixer"，具體每個(gè)loader接受什么參數(shù)請(qǐng)參考loader本身的文檔（一般也就只能在github里看了）。

這plugins參數(shù)相當(dāng)于一個(gè)插槽位（類型是數(shù)組），你可以先按某個(gè)plugin要求的方式初始化好了以后，把初始化后的實(shí)例丟到這里來。

諸位看本系列文章，搭配我在Github上的腳手架項(xiàng)目食用更佳哦（笑）：Array-Huang/webpack-seed(https://github.com/Array-Huang/webpack-seed)。
本文提到的所有內(nèi)容，都可以在示例代碼根目錄下的webpack.config.js里找到對(duì)應(yīng)的內(nèi)容（不過可能稍微有點(diǎn)復(fù)雜呢，畢竟是一個(gè)可以投入生產(chǎn)環(huán)境的架構(gòu)了，不過看過我后續(xù)的文章，就會(huì)覺得很簡單的啦哈哈哈哈）。

webpack多頁應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)：https://segmentfault.com/a/1190000006843916

webpack多頁應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多頁應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？:https://segmentfault.com/a/1190000006871991

webpack多頁應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁應(yīng)用架構(gòu)系列（五）：聽說webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多頁應(yīng)用架構(gòu)系列（六）：聽說webpack連圖片和字體也能打包？:https://segmentfault.com/a/1190000006907701

webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多頁應(yīng)用架構(gòu)系列（八）：教練我要寫ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多頁應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼:https://segmentfault.com/a/1190000007030775

webpack多頁應(yīng)用架構(gòu)系列（十）：如何打造一個(gè)自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實(shí)現(xiàn)webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁&頁面模板:https://segmentfault.com/a/1190000007126268

webpack多頁應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡單的模板布局系統(tǒng):https://segmentfault.com/a/1190000007159115

webpack多頁應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼！多項(xiàng)目共用基礎(chǔ)設(shè)施

webpack多頁應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開發(fā)模式下夾縫生存

webpack多頁應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000006863968
如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang