Webpack - 参考最新的 html 版本答案

【问题标题】：Webpack - reference most recent build in htmlWebpack - 参考最新的 html 版本
【发布时间】：2017-07-26 20:51:00
【问题描述】：

我正在尝试像这样在 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>

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

【问题讨论】：

标签： node.js google-chrome webpack webpack-2

【解决方案1】：

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

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

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

【讨论】：

我只想根据最近的哈希值将 app.bundle.js 替换为 app.bundle.c2d3b2.js。这对我有什么帮助？这似乎生成了新的 html 文件。
它会在你每次运行 webpack 时生成一个新的 HTML，但它会被每次构建所取代。每次都编辑文件并没有什么区别。只需将其指向正确的位置。 filename option 接受路径。
好的，但是如何让 html 指向我最新的 webpack 构建？
生成的 HTML 将自动包含捆绑包（及其哈希）。无需进一步设置。
你是说如果我用 html-webpack-plugin 加载，我可以简单地删除这一行：<script src="bin/app.bundle.js" charset="utf-8"></script>?不幸的是，它对我不起作用。