webpack打包之 緩存

為了有效的緩存你的文件，需要給文件URL添加hash或者版本號。你可以手動的把文件都放進一個帶版本如v1.3的文件夾裡面。但是這樣做會有很多的缺陷：增加額外的工作，沒有更改的文件也不能從緩存裡面取之。

使用webpack可以給filename上加傷hash，有些輸出file的載入器已經支持（work-loader,file-loader）.對於chunks你還需要讓他能夠支持，兩種級別：

1. 從所有的chunks中計算出一個hash值
2. 從每一個chunk中計算一個hash值

第一種：一個給bundle的hash

添加 [hash] 給filename

config options:

webpack ./entry output.[hash].bundle.js

{n output: {n path: path.join(__dirname, "assets", "[hash]"),n publicPath: "assets/[hash]/",n filename: "output.[hash].bundle.js",n chunkFilename: "[id].[hash].bundle.js"n }n}n

第二種: 每個chunk一個hash

添加 [chunkhash] 給 chunk filename

config option

--output-chunk-file [chunkhash].js

output: { chunkFilename: "[chunkhash].bundle.js" }n

注意：如果你想在HTML中使用entry chunk的hash，你可能需要從stats中分離出相應文件的hash 或者filename。

如果是和熱替換結合，你需要使用第一種類型但不能帶publicPath配置選項

從stats中得到 filenames

想要把從asset中得到的最終的filenames嵌入到HTML中，這些信息在webpack的stats 中是可以看到的。如果你使用CLI，運行腳本帶上--json來得到stats的json文件

你也可以添加一個assets-webpack-plugin 的插件到wepack配置當中來讓你得到stats對象。

或者自己寫插件來得到它，例子：

plugins: [n function() {n this.plugin("done", function(stats) {n require("fs").writeFileSync(n path.join(__dirname, "...", "stats.json"),n JSON.stringify(stats.toJson()));n });n }n]n

stats JSON包含了一個有用的屬性assetsByChunkName 包含了一個以chunk name作為key，filename作為值的對象

tips: 如果每個chunk都輸出了多個asset那麼filename會是一個數組. 比如一個chunk 你可能既輸出js也輸出sourceMap文件。

推薦閱讀：