Webpack

长期缓存

为了有效的缓存文件，URL需要有一个hash或版本号，你可以手动的将输出文件移到一个叫v1.3的文件夹
但是这有几个缺点：额外的开发工作并且没有任何改变的文件不能存缓存中获取.
Webpack可以在文件名之后添加hash串，加载器（worker-loader, file-loader）输出的文件已经
做了这项工作，需要你允许块文件使用它，这里有两个级别

  • 计算所有块文件的hash并且添加它
  • 计算每个块文件的hash并且添加它

方式一：对打包文件增加一个hash串

命令行方式webpack ./entry output.[hash].bundle.js，配置文件方式:

1
2
3
4
5
6
7
8
{
    output: {
        path: path.join(__dirname, "assets", "[hash]"),
        publicPath: "assets/[hash]/",
        filename: "output.[hash].bundle.js",
        chunkFilename: "[id].[hash].bundle.js"
    }
}

方式二：每一个块文件一个hash串
可以通过添加[chunkhash]到配置文件的filename属性中
--output-chunk-file [chunkhash].js

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

注意：你需要在HTML中引入带有hash串的入口块，你需要从stats中提取出hash串。
为了兼容代码热部署，你需要使用方式一，但是不要在publicPath中使用hash串。

从stats中获取文件名

你可能需要访问最终的文件以便在HTML中嵌入，这段资料可获得webpack的stats，如果你使用命令
行,可通过--with获得json的标准输出。
可以在配置文件中添加插件比如assets-webpack-plugin来访问stats对象，这是一个将stats
写入文件的例子:

1
2
3
4
5
6
7
8
9
plugins: [
  function() {
    this.plugin("done", function(stats) {
      require("fs").writeFileSync(
        path.join(__dirname, "..", "stats.json"),
        JSON.stringify(stats.toJson()));
    });
  }
]

stats的JSON格式包含了一个有用的属性assetsByChunkNam,它是一个对象，以块名字为键，对应
的文件名为值。
注意：如果一个块文件输出了多个资源文件，那么stats是数组，数组的第一个元素是你的
javascript资源。