html-webpack-plugin 注入和 webpack 导致持续刷新答案

【问题标题】：html-webpack-plugin injection and webpack causing continuous refreshhtml-webpack-plugin 注入和 webpack 导致持续刷新
【发布时间】：2018-02-25 21:32:10
【问题描述】：

我在使用 html-webpack-plugin 和 webpack 时遇到问题，其中 html-webpack-plugin 将脚本注入到 index.html 的正文中。这显然导致 webpack 不断刷新，并且每次都生成新文件。一是如何防止这种情况发生，二是有没有办法配置 html-webpack-plugin 删除 webpack 生成的不再存在的 javascript 文件对应的脚本（本例中对应的过期文件在下面的配置文件中输出static/bundle-[hash].js）？

这里是 webpack 的配置文件：

const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./js/main.js",
    output: {
        filename: "static/bundle-[hash].js",
    },
    resolveLoader: {
    moduleExtensions: ['-loader']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015', 'stage-0']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader',
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['static/bundle*.js']),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'body'
        })
    ]
};

【问题讨论】：

标签： javascript html webpack

【解决方案1】：

在开发中，您应该删除文件名中的所有哈希以防止这种行为！

Webpack 可以通过热重载将旧文件更新为新内容。

【讨论】：

【解决方案2】：

根据doc 您可以让插件为您生成 HTML 文件，提供您自己的模板

因此，您可以通过提供 filename 来生成 HTML 文件，也可以传递 index.html

之类的模板

【讨论】：