Question

我正在尝试在webpack中哈希构建，如下所示：

module.exports = {

    // ....

    output: {
        path: './bin',
        filename: 'app.bundle.[hash:6].js',
        publicPath: '/bin/'
    },

    // ....

}

因此，当我使用webpack捆绑时，我在命令行中得到类似的内容：

Hash: c2d3b2003d64b88b4438
Version: webpack 2.2.1
Time: 689ms
                   Asset    Size  Chunks                    Chunk Names
    app.bundle.c2d3b2.js  385 kB       0  [emitted]  [big]  main
app.bundle.c2d3b2.js.map  570 kB       0  [emitted]         main

所以我知道它正好散列。我的问题是，如何在html中引用最新的webpack哈希？现在，我有：

<script src="bin/app.bundle.js" charset="utf-8"></script>

但我不能这样做：

<script src="bin/app.bundle[hash:6].js" charset="utf-8"></script>

这样做的正确方法是什么？

Answer 1

您可以使用html-webpack-plugin。它生成一个HTML文件，自动包含webpack生成的所有包。如果您使用extract-text-webpack-plugin，则提取的CSS文件也将包含在HTML中。如果您不想使用默认的template，则可以使用自定义{{3}}。

以template.html为模板的示例（默认输出文件为index.html）：

plugins: [
  new HtmlWebpackPlugin({
    template: 'template.html'
  })
]

Webpack - 引用最新的html版本

1 个答案: