摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。參數用來表示本配置僅針對哪些目錄文件，該值應是一個條件值。示例代碼諸位看本系列文章，搭配我在上的腳手架項目食用更佳哦笑。

本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。
原文地址：https://segmentfault.com/a/1190000006863968
如果您對本系列文章感興趣，歡迎關注訂閱這里：https://segmentfault.com/blog/array_huang

webpack的配置文件是一個node.js的module，用CommonJS風格來書寫，形如：

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

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

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

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

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

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

entry可以是字符串（單入口），可以是數組（多入口），但為了后續發展，請務必使用object，因為object中的key在webpack里相當于此入口的name，既可以后續用來拼生成文件的路徑，也可以用來作為此入口的唯一標識。
我推薦的形式是這樣的：

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

對照我的腳手架項目webpack-seed的文件目錄結構，就很清楚了：

├─src # 當前項目的源碼
    ├─pages # 各個頁面獨有的部分，如入口文件、只有該頁面使用到的css、模板文件等
    │  ├─alert # 業務模塊
    │  │  └─index # 具體頁面
    │  ├─index # 業務模塊
    │  │  ├─index # 具體頁面
    │  │  └─login # 具體頁面

由于每一個入口文件都相當于entry里的一項，因此這樣一項一項地來寫實在是有點繁瑣，我就稍微寫了點代碼來拼接這entry：

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

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

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

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

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

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

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

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

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

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

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

webpack的核心實際上也只能針對js進行打包，那webpack一直號稱能夠打包任何資源是怎么一回事呢？原來，webpack擁有一個類似于插件的機制，名為Loader，通過Loader，webpack能夠針對每一種特定的資源做出相應的處理。Loader的種類相當多，有些比較基礎的是官方自己開發，而其它則是由webpack社區開源貢獻出來的，這里是Loader的List：list of loaders。
而module正是配置什么資源使用哪個Loader的參數（因為就算是同一種資源，也可能有不同的Loader可以使用，當然不同Loader處理的手段不一樣，最后結果也自然就不一樣了）。module參數有幾個子參數，但是最常用的自然還是loaders子參數，這里也僅對loaders子參數進行介紹。

loaders參數又有幾個子參數，先給出一個官方示例：

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"
  }
]

下面一一對這些子參數進行說明：

test參數用來指示當前配置項針對哪些資源，該值應是一個條件值(condition)。

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

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

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

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

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

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

webpack多頁應用架構系列（一）：一步一步解決架構痛點：https://segmentfault.com/a/1190000006843916

webpack多頁應用架構系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多頁應用架構系列（三）：怎么打包公共代碼才能避免重復？:https://segmentfault.com/a/1190000006871991

webpack多頁應用架構系列（四）：老式jQuery插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁應用架構系列（五）：聽說webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

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

webpack多頁應用架構系列（七）：開發環境、生產環境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

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

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

webpack多頁應用架構系列（十）：如何打造一個自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁應用架構系列（十一）：預打包Dll，實現webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁應用架構系列（十二）：利用webpack生成HTML普通網頁&頁面模板:https://segmentfault.com/a/1190000007126268

webpack多頁應用架構系列（十三）：構建一個簡單的模板布局系統:https://segmentfault.com/a/1190000007159115

webpack多頁應用架構系列（十四）：No復制粘貼！多項目共用基礎設施

webpack多頁應用架構系列（十五）：論前端如何在后端渲染開發模式下夾縫生存

webpack多頁應用架構系列（十六）：善用瀏覽器緩存，該去則去，該留則留

本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。
原文地址：https://segmentfault.com/a/1190000006863968
如果您對本系列文章感興趣，歡迎關注訂閱這里：https://segmentfault.com/blog/array_huang