Webpack-更新HTML以包括最新的[已打包]捆绑包的最佳方法 [英] Webpack - Best way to update HTML to include latest [hashed] bundles

问题描述

我正在使用webpack生成散列的捆绑文件名。

I'm using webpack to generate hashed bundle filenames.

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

Assuming I'm using static HTML, CSS & JS, what is the best way to automatically update index.html to point to the latest bundles?

例如，

更新：

<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

每当有新的捆绑软件版本可用时，都会自动进行。

automatically everytime a new bundle version is available.

推荐答案

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

Amazingly, this is what the html-webpack-plugin is for.

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')
            })
        ]
    }
};

这会在页面中生成 index.html dist 目录，其中包含脚本的正确顺序。

This generates an index.html in the dist directory that includes the script's in the correct order.

YouTube示例

这篇关于Webpack-更新HTML以包括最新的[已打包]捆绑包的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！