摘要：之后的配置都是用作為生成因?yàn)橐幚聿煌K的依賴關(guān)系，所以他內(nèi)置了一個(gè)模板用來(lái)處理依賴關(guān)系后面稱為，這段因此也會(huì)被打包的我們最后里面。于是我們又打包恩，熟悉的味道。

童鞋，你看到這篇文章的時(shí)候很可能你只是在找一篇webpack的配置文章教學(xué)，但是聽(tīng)老哥說(shuō)一句，別去搜什么startkit或者best practice文章，特別是中文的，如果你找到了，也記得看一下文章啥時(shí)候?qū)懙?，超過(guò)半年的文章就別看了，百分之92.6里面的內(nèi)容已經(jīng)過(guò)期了。你想學(xué)webpack相關(guān)的姿勢(shì)，最好的辦法就是：看文檔

言歸正傳，這篇文章并不教你怎么配置webpack，內(nèi)容全部都是關(guān)于webpack生成文件的hash的。在打包出來(lái)的文件名上加上文件內(nèi)容的hash是目前最常見(jiàn)的有效使用瀏覽器長(zhǎng)緩存的方法，js文件如果有內(nèi)容更新，hash就會(huì)更新，瀏覽器請(qǐng)求路徑變化所以更新緩存，如果js內(nèi)容不變，hash不變，直接用緩存，PERFECT！所以所有的問(wèn)題就留給如何更好得控制文件的hash了。

首先我們弄一個(gè)最簡(jiǎn)單的webpack配置：

const path = require("path")

module.exports = {
  entry: {
    app: path.join(__dirname, "src/foo.js")
  },
  output: {
    filename: "[name].[chunkhash].js",
    path: path.join(__dirname, "dist")
  }
}

而我們foo.js如下：

import React from "react"
console.log(React.toString())

注意這里的output.filename你也可以用[hash]而不是[chunkhash]，但是這兩種生成的hash碼是不一樣的
使用hash如下：

app.03700a98484e0f02c914.js  70.4 kB       0  [emitted]  app
   [6] ./src/foo.js 55 bytes {0} [built]
    + 11 hidden modules

使用chunkhash如下：

app.f2f78b37e74027320ebf.js  70.4 kB       0  [emitted]  app
   [6] ./src/foo.js 55 bytes {0} [built]
    + 11 hidden modules

對(duì)于單個(gè)entry來(lái)說(shuō)用哪個(gè)都沒(méi)有問(wèn)題，做例子期間使用的是[email protected]版本，這個(gè)版本webpack對(duì)于源碼沒(méi)有改動(dòng)的情況，已經(jīng)修復(fù)了hash串會(huì)變的問(wèn)題。但是在之前的版本有可能會(huì)出現(xiàn)對(duì)于同一份沒(méi)有修改的代碼進(jìn)行修改，hash不一致的問(wèn)題，所以不管你使用的版本會(huì)不會(huì)有問(wèn)題，都建議使用接下去的配置。之后的配置都是用chunkhash作為hash生成

因?yàn)閣ebpack要處理不同模塊的依賴關(guān)系，所以他內(nèi)置了一個(gè)js模板用來(lái)處理依賴關(guān)系（后面稱為runtime），這段js因此也會(huì)被打包的我們最后bundle里面。在實(shí)際項(xiàng)目中我們常常需要將這部分代碼分離出來(lái)，比如我們要把類庫(kù)分開(kāi)打包的情況，如果不多帶帶給runtime多帶帶生成一個(gè)js，那么他會(huì)和類庫(kù)一起打包，而這部分代碼會(huì)隨著業(yè)務(wù)代碼改變而改變，導(dǎo)致類庫(kù)的hash也每次都改變，那么我們分離出類庫(kù)就沒(méi)有意義了。所以這里我們需要給runtime多帶帶提供一個(gè)js。

修改配置如下：

module.exports = {
  entry: {
    app: path.join(__dirname, "src/foo.js")
  },
  output: {
    filename: "[name].[chunkhash].js",
    path: path.join(__dirname, "dist")
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "runtime"
    })
  ]
}

webpack的文檔中說(shuō)明，如果給webpack.optimize.CommonsChunkPlugin的name指定一個(gè)在entry中沒(méi)有聲明的名字，那么他會(huì)把runtime代碼打包到這個(gè)文件中，所以你這里可以任意指定你喜歡的name (ゝ??)b

那么現(xiàn)在打包出來(lái)會(huì)是神馬樣的呢？

app.aed80e077eb0a6c42e65.js    68 kB       0  [emitted]  app
runtime.ead626e4060b3a0ecb1f.js  5.82 kB       1  [emitted]  runtime
   [6] ./src/foo.js 55 bytes {0} [built]
    + 11 hidden modules

我們可以看到，app和runtime的hash是不一樣的。那么如果我們使用hash而不是chunkhash呢？

app.357eff03ae011d688ac3.js    68 kB       0  [emitted]  app
runtime.357eff03ae011d688ac3.js  5.81 kB       1  [emitted]  runtime
   [6] ./src/foo.js 55 bytes {0} [built]
    + 11 hidden modules

從這里就可以看出hash和chunkhash的區(qū)別了，chunkhash會(huì)包含每個(gè)chunk的區(qū)別（chunk可以理解為每個(gè)entry），而hash則是所有打包出來(lái)的文件都是一樣的，所以一旦你的打包輸出有多個(gè)文件，你勢(shì)必需要使用chunkhash。

在一般的項(xiàng)目中，我們的類庫(kù)文件都不會(huì)經(jīng)常更新，比如react，更多的時(shí)候我們更新的是業(yè)務(wù)代碼。那么我們肯定希望類庫(kù)代碼能夠盡可能長(zhǎng)的在瀏覽器進(jìn)行緩存，這就需要我們多帶帶給類庫(kù)文件打包了，怎么做呢？

修改配置文件：

module.exports = {
  entry: {
    app: path.join(__dirname, "src/foo.js"),
    vendor: ["react"]  // 所有類庫(kù)都可以在這里聲明
  },
  output: {
    filename: "[name].[chunkhash].js",
    path: path.join(__dirname, "dist")
  },
  plugins: [
    // 多帶帶打包，app中就不會(huì)出現(xiàn)類庫(kù)代碼
    // 必須放在runtime之前
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: "runtime"
    })
  ]
}

然后我們來(lái)執(zhí)行以下打包：

 vendor.72d208b8e74b753cf09c.js    67.7 kB       0  [emitted]  vendor
    app.fdc2c0fe8694c1690cb3.js  494 bytes       1  [emitted]  app
runtime.035d95805255d39272ba.js    5.85 kB       2  [emitted]  runtime
   [7] ./src/foo.js 55 bytes {1} [built]
  [12] multi react 28 bytes {0} [built]
    + 11 hidden modules

vendor和app分開(kāi)了，而且hash都不一樣，看上去很美好是不是？高興太早了年輕人。我們?cè)傩陆ㄒ粋€(gè)文件，叫bar.js，代碼如下：

import React from "react"

export default function() {
  console.log(React.toString())
}

然后修改foo.js如下：

import bar from "./bar.js"
console.log(bar())

從這個(gè)修改中可以看出，我們并沒(méi)有修改類庫(kù)相關(guān)的內(nèi)容，我們的vendor中應(yīng)該依然只有react，那么vendor的hash應(yīng)該是不會(huì)變的，那么結(jié)果如我們所愿嗎？

vendor.424ef301d6c78a447180.js    67.7 kB       0  [emitted]  vendor
    app.0dfe0411d4a47ce89c61.js  845 bytes       1  [emitted]  app
runtime.e90ad557ba577934a75f.js    5.85 kB       2  [emitted]  runtime
   [7] ./src/foo.js 45 bytes {1} [built]
   [8] ./src/bar.js 88 bytes {1} [built]
  [13] multi react 28 bytes {0} [built]
    + 11 hidden modules

很遺憾，webpack狠狠打了我們的臉╮(╯_╰)╭

這是什么原因呢？這是因?yàn)槲覀兌嗉尤肓艘粋€(gè)文件，對(duì)于webpack來(lái)說(shuō)就是多了一個(gè)模塊，默認(rèn)情況下webpack的模塊都是以一個(gè)有序數(shù)列命名的，也就是[0,1,2....]，我們中途加了一個(gè)模塊導(dǎo)致每個(gè)模塊的順序變了，vendor里面的模塊的模塊id變了，所以hash也就變了?？偨Y(jié)一下：

app變化是因?yàn)閮?nèi)容發(fā)生了變化

vendor變化時(shí)因?yàn)樗膍odule.id發(fā)生了變化

runtime變化時(shí)因?yàn)樗旧砭褪蔷S護(hù)模塊依賴關(guān)系的

那么怎么解決呢？

這兩個(gè)plugin讓webpack不再使用數(shù)字給我們的模塊進(jìn)行命名，這樣每個(gè)模塊都會(huì)有一個(gè)獨(dú)有的名字，也就不會(huì)出現(xiàn)增刪模塊導(dǎo)致模塊id變化引起最終的hash變化了。如何使用？

{
  plugins: [
    new webpack.NamedModulesPlugin(),
    // new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: "runtime"
    })
  ]
}

NamedModulePlugin一般用在開(kāi)發(fā)時(shí)，能讓我們看到模塊的名字，可讀性更高，但是性能相對(duì)較差。HashedModuleIdsPlugin更建議在正式環(huán)境中使用。

我們來(lái)看一下使用這個(gè)插件后，兩次打包的結(jié)果，修改前：

 vendor.91148d0e2f4041ef2280.js      69 kB       0  [emitted]  vendor
    app.0228a43edf0a32a59426.js  551 bytes       1  [emitted]  app
runtime.8ed369e8c4ff541ad301.js    5.85 kB       2  [emitted]  runtime
[./src/foo.js] ./src/foo.js 56 bytes {1} [built]
   [0] multi react 28 bytes {0} [built]
    + 11 hidden modules

修改后：

 vendor.91148d0e2f4041ef2280.js      69 kB       0  [emitted]  vendor
    app.f64e232e4b6d6a59e617.js  917 bytes       1  [emitted]  app
runtime.c12d50e9a1902f12a9f4.js    5.85 kB       2  [emitted]  runtime
[./src/bar.js] ./src/bar.js 88 bytes {1} [built]
   [0] multi react 28 bytes {0} [built]
[./src/foo.js] ./src/foo.js 43 bytes {1} [built]
    + 11 hidden modules

可以看到vendor的hash沒(méi)有變化，HashedModuleIdsPlugin也是一樣的效果。貌似世界變得更和諧了d(`???)b，是嗎？哈哈，并不是！

隨著我們的系統(tǒng)變得越來(lái)越大，模塊變得很多，如果所有模塊一次性打包到一起，那么首次加載就會(huì)變得很慢。這時(shí)候我們會(huì)考慮做異步加載，webpack原生支持異步加載，用起來(lái)很方便。

我們?cè)賱?chuàng)建一個(gè)js叫做async-bar.js，在foo.js中：

import("./async-bar").then(a => console.log(a))

打包：

      0.1415eebc42d74a3dc01d.js  131 bytes       0  [emitted]
 vendor.19a637337ab59d16fb34.js      69 kB       1  [emitted]  vendor
    app.f7e5ecde27458097680e.js    1.04 kB       2  [emitted]  app
runtime.c4caa7f9859faa94b02e.js    5.88 kB       3  [emitted]  runtime
[./src/async-bar.js] ./src/async-bar.js 32 bytes {0} [built]
[./src/bar.js] ./src/bar.js 88 bytes {2} [built]
   [0] multi react 28 bytes {1} [built]
[./src/foo.js] ./src/foo.js 92 bytes {2} [built]
    + 11 hidden modules

恩，這時(shí)候我們已經(jīng)看到，我們的vendor變了，但是更可怕的還在后頭，我們?cè)俳艘粋€(gè)模塊叫async-baz.js，一樣的在foo.js引用：

import("./async-baz").then(a => console.log(a))

然后再打包：

      0.eb2218a5fc67e9cc73e4.js  131 bytes       0  [emitted]
      1.61c2f5620a41b50b31eb.js  131 bytes       1  [emitted]
 vendor.1eada47dd979599cc3e5.js      69 kB       2  [emitted]  vendor
    app.1f82033832b8a5dd6e3b.js    1.17 kB       3  [emitted]  app
runtime.615d429d080c11c1979f.js     5.9 kB       4  [emitted]  runtime
[./src/async-bar.js] ./src/async-bar.js 32 bytes {1} [built]
[./src/async-baz.js] ./src/async-baz.js 32 bytes {0} [built]
[./src/bar.js] ./src/bar.js 88 bytes {3} [built]
   [0] multi react 28 bytes {2} [built]
[./src/foo.js] ./src/foo.js 140 bytes {3} [built]
    + 11 hidden modules

恩，我能說(shuō)臟話嗎？不能？(╯‵□′)╯︵┻━┻

為啥每個(gè)模塊的hash都變了?。浚?！為啥模塊又變成數(shù)字ID了?。浚。?/p>

好吧，言歸正傳，決絕辦法還是有的，那就是NamedChunksPlugin，之前是用來(lái)處理每個(gè)chunk名字的，似乎在最新的版本中不需要這個(gè)也能正常打包普通模塊的名字。但是這里我們可以用來(lái)處理異步模塊的名字，在webpack的plugins中加入如下代碼：

new webpack.NamedChunksPlugin((chunk) => { 
  if (chunk.name) { 
    return chunk.name; 
  } 
  return chunk.mapModules(m => path.relative(m.context, m.request)).join("_"); 
}),

再執(zhí)行打包，兩次結(jié)果如下：

         app.5faeebb6da84bedaac0a.js    1.11 kB           app  [emitted]  app
async-bar.js.457b1711c7e8c6b6914c.js  144 bytes  async-bar.js  [emitted]
     runtime.f263e4cd58ad7b17a4bf.js     5.9 kB       runtime  [emitted]  runtime
      vendor.05493d3691191b049e65.js      69 kB        vendor  [emitted]  vendor
[./src/async-bar.js] ./src/async-bar.js 32 bytes {async-bar.js} [built]
[./src/bar.js] ./src/bar.js 88 bytes {app} [built]
   [0] multi react 28 bytes {vendor} [built]
[./src/foo.js] ./src/foo.js 143 bytes {app} [built]
    + 11 hidden modules


         app.55e3f40adacf95864a96.js     1.2 kB           app  [emitted]  app
async-bar.js.457b1711c7e8c6b6914c.js  144 bytes  async-bar.js  [emitted]
async-baz.js.a85440cf862a8ad3a984.js  144 bytes  async-baz.js  [emitted]
     runtime.deeb657e46f5f7c0da42.js    5.94 kB       runtime  [emitted]  runtime
      vendor.05493d3691191b049e65.js      69 kB        vendor  [emitted]  vendor
[./src/async-bar.js] ./src/async-bar.js 32 bytes {async-bar.js} [built]
[./src/async-baz.js] ./src/async-baz.js 32 bytes {async-baz.js} [built]
[./src/bar.js] ./src/bar.js 88 bytes {app} [built]
   [0] multi react 28 bytes {vendor} [built]
[./src/foo.js] ./src/foo.js 140 bytes {app} [built]
    + 11 hidden modules

可以看到結(jié)果都是用名字而不是id了，而且不改改變的地方也都沒(méi)有改變

注意生成chunk名字的邏輯代碼你可以根據(jù)自己的需求去改

使用上面的方式會(huì)有一些問(wèn)題，比如使用.vue文件開(kāi)發(fā)模式，m.request是一大串vue-loader生成的代碼，所以打包會(huì)報(bào)錯(cuò)。當(dāng)然大家可以自己找對(duì)應(yīng)的命名方式，在這里我推薦一個(gè)webpack原生支持的方式，在使用import的時(shí)候，寫(xiě)如下注釋：

import(/* webpackChunkName: "views-home" */ "../views/Home")

然后配置文件只要使用new NamedChunksPlugin()就可以了，不需要自己再拼寫(xiě)名字，因?yàn)檫@個(gè)時(shí)候我們的異步chunk已經(jīng)有名字了。

所以到這就結(jié)束了是嗎？真的，求你快結(jié)束吧，我想去吃我兩小時(shí)前買的烤鴨了。

好~~~的吧，我們還得搞點(diǎn)事情

修改webpack.config.js：

{
  ...
  entry: {
    app: path.join(__dirname, "src/foo.js"),
    vendor: ["react"],
    two: path.join(__dirname, "src/foo-two.js")
  },
  ...
}

增加的enrty如下：

import bar from "./bar.js"
console.log(bar)

import("./async-bar").then(a => console.log(a))
// import("./async-baz").then(a => console.log(a))

是的跟foo.js一模一樣，當(dāng)然你可以改邏輯，只需要記得引用bar.js就可以。

然后我們打包，結(jié)果會(huì)讓你想再次(╯‵□′)╯︵┻━┻

         app.77b13a56bbc0579ca35c.js  612 bytes           app  [emitted]  app
async-bar.js.457b1711c7e8c6b6914c.js  144 bytes  async-bar.js  [emitted]
     runtime.bbe8e813f5e886e7134a.js    5.93 kB       runtime  [emitted]  runtime
         two.9e4ce5a54b4f73b2ed60.js  620 bytes           two  [emitted]  two
      vendor.8ad1e07bfa18dd78ad0f.js    69.5 kB        vendor  [emitted]  vendor
[./src/async-bar.js] ./src/async-bar.js 32 bytes {async-bar.js} [built]
[./src/bar.js] ./src/bar.js 88 bytes {vendor} [built]
   [0] multi react 28 bytes {vendor} [built]
[./src/foo-two.js] ./src/foo-two.js 143 bytes {two} [built]
[./src/foo.js] ./src/foo.js 143 bytes {app} [built]
    + 11 hidden modules

為毛所有文件的hash都變化了啊？！??！逗我玩呢？

好吧，原因是vendor作為common chunk并不只是包含我們?cè)趀ntry中聲明的部分，他還會(huì)包含每個(gè)entry中引用的公共代碼，有些時(shí)候你可能希望這樣的結(jié)果，但在我們這里，這就是我要解決的一個(gè)問(wèn)題啊?(?д??)

所以這里怎么做呢，在CommonsChunkPlugin里面有一個(gè)參數(shù)，可以用來(lái)告訴webpack我們的vendor真的只想包含我們聲明的內(nèi)容：

{
  plugins: [
    ...
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity
    }),
  ]
}

這個(gè)參數(shù)的意思是盡可能少的把公用代碼包含到vendor里面。于是我們又打包：

         app.5faeebb6da84bedaac0a.js    1.13 kB           app  [emitted]  app
async-bar.js.457b1711c7e8c6b6914c.js  144 bytes  async-bar.js  [emitted]
     runtime.b0406822caa4d1898cb8.js    5.93 kB       runtime  [emitted]  runtime
         two.9be2d4a28265bfc9d947.js    1.13 kB           two  [emitted]  two
      vendor.05493d3691191b049e65.js      69 kB        vendor  [emitted]  vendor
[./src/async-bar.js] ./src/async-bar.js 32 bytes {async-bar.js} [built]
[./src/bar.js] ./src/bar.js 88 bytes {app} {two} [built]
   [0] multi react 28 bytes {vendor} [built]
[./src/foo-two.js] ./src/foo-two.js 143 bytes {two} [built]
[./src/foo.js] ./src/foo.js 143 bytes {app} [built]
    + 11 hidden modules

恩，熟悉的味道。

到這里我們跟webpack的hash變化之戰(zhàn)算是告一段落，大部分webpack打包出現(xiàn)問(wèn)題的原因是模塊命名的問(wèn)題，所以解決辦法其實(shí)也就是給每個(gè)模塊一個(gè)固定的名字。

最后我們的配置如下：

const path = require("path")
const webpack = require("webpack")

module.exports = {
  entry: {
    app: path.join(__dirname, "src/foo.js"),
    vendor: ["react"],
    two: path.join(__dirname, "src/foo-two.js")
  },
  externals: {
    jquery: "jQuery"
  },
  output: {
    filename: "[name].[chunkhash].js",
    path: path.join(__dirname, "dist")
  },
  plugins: [
    new webpack.NamedChunksPlugin((chunk) => { 
      if (chunk.name) { 
        return chunk.name; 
      } 
      return chunk.mapModules(m => path.relative(m.context, m.request)).join("_"); 
    }),
    new webpack.NamedModulesPlugin(),
    // new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: Infinity
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: "runtime"
    })
  ]
}

如果你遇到了其他問(wèn)題，你可以給我留言，我會(huì)去嘗試解決，希望大家看完能有一些收獲( σ?? ?)σ

參考文章：

https://webpack.js.org/guides/caching/

一篇牛逼的blog