Webpack - 更新 HTML 以包含最新的 [hashed] 包的最佳方式

【问题标题】：Webpack - Best way to update HTML to include latest [hashed] bundlesWebpack - 更新 HTML 以包含最新的 [hashed] 包的最佳方式
【发布时间】：2017-06-15 23:19:51
【问题描述】：

我正在使用 webpack 生成散列包文件名。

假设我使用的是静态 HTML、CSS 和 JS，自动更新 index.html 以指向最新包的最佳方法是什么？

例如，

更新：

<script src="e8e839c3a189c25de178.app.js"></script>
<script src="c353591725524074032b.vendor.js"></script>

收件人：

<script src="d6cba2f2e2fb3f9d98aa.app.js"></script>
<script src="c353591725524074032b.vendor.js"></script> // no change

每次有新的捆绑版本可用时自动进行。

【问题讨论】：

标签： javascript html webpack browser-cache webpack-2

【解决方案1】：

令人惊讶的是，这就是 html-webpack-plugin 的用途。

var webpack = require('webpack');
var path = require('path');
var HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = function(env) {
    return {
        entry: {
            main: './src/index.js',
            vendor: 'moment'
        },
        output: {
            filename: '[chunkhash].[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendor', 'manifest']
            }),
            new HTMLWebpackPlugin({
                tempate: path.join(__dirname, './src/index.html')
            })
        ]
    }
};

这会在dist 目录中生成一个index.html，其中包含正确顺序的script。

youtube example

【讨论】：