摘要：但在產(chǎn)品模式下，我們非常有必要在的屬性里的里配置一個(gè)來(lái)變向的為靜態(tài)資源注入版本號(hào)，如下，以便上線(xiàn)之后頁(yè)面可以引入版本更新后的代碼。通過(guò)給靜態(tài)資源注入值來(lái)作為版本號(hào)的好處主要有兩個(gè)實(shí)現(xiàn)策略。

webpack，作為一個(gè)處理模塊加載、資源依賴(lài)管理、構(gòu)建化的工具，已經(jīng)逐漸成為了前端工程化領(lǐng)域的新貴。其創(chuàng)造性的把每個(gè)靜態(tài)資源歸為一個(gè) module（模塊）并能被其強(qiáng)大的 loader 所加載的這種方式，成功的開(kāi)辟了前端工程界的另一大生態(tài)?；谄涔倬W(wǎng)文檔的完善度較高，這篇文章就不對(duì) webpack 的主要內(nèi)容做過(guò)多的介紹，而是回歸到本文的主題，即通過(guò)介紹幾款 webpack 相關(guān)的插件，來(lái)解決一個(gè)常見(jiàn)的工程問(wèn)題：如何做到靜態(tài)資源路徑可以在不同的環(huán)境下自動(dòng)切換。

這到底是個(gè)怎樣的問(wèn)題？設(shè)想一下，在使用 webpack 打包編譯之后，它會(huì)生成一個(gè) js 文件，隨后我們需要在 html 或者模板文件里指定這個(gè)文件的路徑確保其被正確的引入，

對(duì)于開(kāi)發(fā)環(huán)境下的單入口文件（稍后會(huì)介紹 webpack 打包到多個(gè)入口的解決方案 ）,這個(gè)標(biāo)簽內(nèi)的引入文件路徑完全可以寫(xiě)死，而且在 webpack-dev-server 熱替換機(jī)制的幫助下，我們也無(wú)須通過(guò)對(duì)打包生成的文件添加 hash 值來(lái)處理因?yàn)g覽器緩存的緣故引起的引用不到最新資源。

但在產(chǎn)品模式下，我們非常有必要在 webpack 的 output 屬性里的 filename 里配置一個(gè) chunkhash 來(lái)變向的為靜態(tài)資源注入版本號(hào)，如下，

output: {
 filename: [name].[chunkhash].js,
}

以便上線(xiàn)之后頁(yè)面可以引入版本更新后的代碼。chunkhash 是一個(gè)基于文件內(nèi)容，通過(guò)摘要算法（如md5）生成的一個(gè)被稱(chēng)之為文件指紋的序號(hào)，即只有當(dāng)文件內(nèi)容發(fā)生改變的時(shí)候，這個(gè)值才會(huì)相應(yīng)更改。

通過(guò)給靜態(tài)資源注入 hash 值來(lái)作為版本號(hào)的好處主要有兩個(gè)：

實(shí)現(xiàn) long term caching 策略。當(dāng)發(fā)布新版本時(shí)，我們只需要更新更改了的資源。這比起將新版資源存放在例如/v1.3/xx.js這種帶版本號(hào)的路徑或文件夾下的部署方式會(huì)顯得更科學(xué)一點(diǎn)：減少手動(dòng)配置版本號(hào)的額外操作、已經(jīng)緩存過(guò)且緩存尚未過(guò)期的瀏覽器只需請(qǐng)求更新過(guò)的資源，確保未變更過(guò)的資源可以依舊從緩存內(nèi)讀取。

實(shí)現(xiàn)非覆蓋式發(fā)布策略。張?jiān)讫埨蠋煹脑闹刑岬降倪@種平滑的版本升級(jí)方式更加完美的解決了靜態(tài)資源部署至CDN出現(xiàn)的問(wèn)題。

這個(gè)時(shí)候我們?cè)賮?lái)看下線(xiàn)上的 script 引入,

Fine, 也許你會(huì)說(shuō)我可以手動(dòng) copy/paste 這個(gè)版本號(hào)當(dāng)你需要從開(kāi)發(fā)切到產(chǎn)品環(huán)境，額額，單個(gè)入口文件這么處理雖是可以，但想象下當(dāng)有多個(gè)入口文件的時(shí)候。。。（感覺(jué)我的左手大拇指肌腱炎又要犯了。。），這么經(jīng)典的問(wèn)題webpack早已準(zhǔn)備好了它的解決方案。

這一部分的工作可以說(shuō)是解決這個(gè)問(wèn)題的一個(gè)核心環(huán)節(jié)，即我們需要通過(guò) webpack 來(lái)生成類(lèi)似如下一張對(duì)應(yīng)關(guān)系圖：

{
    "app.js": "http://xxx.cdn.com/app.82076244596568c8c929.js"
}

像在 webpack 的 plugin 屬性里配置如下，我們就可以通過(guò)返回 webpack 的編譯數(shù)據(jù)里獲取到帶有 chunkhash 的文件信息：

// webpack.config.js
module.exports = {
  ...
  plugins: [
    function() {
      this.plugin("done", function(stats) {
        require("fs").writeFileSync(
          path.join(__dirname, "..", "stats.json"),
          JSON.stringify(stats.toJson()));
      });
    }
  ]
}

將 stats.json require 到項(xiàng)目中，通過(guò)讀取 publicPath、 assetsByChunkName 屬性，可以得到開(kāi)發(fā)與線(xiàn)上環(huán)境資源路徑的對(duì)應(yīng)關(guān)系。

webpack 官方也推薦了幾個(gè)有同樣效果，我個(gè)人覺(jué)得更好用的插件：assets-webpack-plugin 或者 webpack-manifest-plugin 來(lái)生成出一個(gè) JSON 對(duì)應(yīng)關(guān)系文件。

接下來(lái)的工作基本上就是如何利用這個(gè)對(duì)應(yīng)關(guān)系來(lái)切換對(duì)應(yīng)環(huán)境下的路徑。這個(gè)還要取決于你的頁(yè)面是否會(huì)涉及到服務(wù)端的渲染。

服務(wù)端渲染資源路徑

以 node 作為服務(wù)端語(yǔ)言，handlebars（或者ejs）為模板語(yǔ)言為例，我們通過(guò)編寫(xiě)模板語(yǔ)言的 helper 來(lái)讀取由 assets-webpack-plugin 生成的 stats.json，在不同的環(huán)境下實(shí)現(xiàn)路徑切換：

stats.json -- webpack 跑開(kāi)發(fā)配置

{
    "app": {
        "js": "app.js"
    }
}

stats.json -- webpack 跑生產(chǎn)配置

{
    "app": {
        "js": "http://xxx.cdn.com/app.82076244596568c8c929.js"
    }
}

example.handlebars

后臺(tái)通過(guò) require stats.json 數(shù)據(jù)并傳入到模板即可實(shí)現(xiàn)根據(jù)環(huán)境動(dòng)態(tài)渲染資源路徑。

如果你的后臺(tái)是使用 Rails 來(lái)搭建的話(huà)，那么這篇文章更詳細(xì)的介紹了處理這種情況下處理資源切換的問(wèn)題

前端渲染頁(yè)面模板

如果你的項(xiàng)目不依賴(lài)任何后端渲染，那么 html-webpack-plugin 這款插件可以為你動(dòng)態(tài)生成一個(gè)帶有 css、js 等資源路徑的 html 文件。

html-webpack-plugin 具體的用法可以點(diǎn)擊這里，其中 inject 這個(gè)屬性可以讓你將 script 標(biāo)簽插入到 dom 的指定位置。為了能夠更大權(quán)限的將 webpack 編譯過(guò)的資源可以插入到 html 文件的任意位置，我們可以在 HtmlWebpackPlugin 里指定的 template 文件里寫(xiě)入如下代碼：

  <% for (var css in htmlWebpackPlugin.files.css) { %>
  
  <% } %>

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>

<% } %>

就可以同樣實(shí)現(xiàn)靜態(tài)資源的切換，所以對(duì)于前端渲染模板的這種情況，我們無(wú)須再生成一個(gè) json 文件，對(duì)于使用諸如 react、vue 這種框架，僅使用這個(gè)插件也是極好的。

htmlWebpackPlugin 具體還有哪些屬性可以配置，可以參考下這個(gè) default template 查看完整例子