热模块替换不会在更新 html 内容时重新加载,而是在 webpack 5 上的 css 和 js 上重新加载

这是我对 webpack 和包 json 的设置。我正在为 html 文件使用 2 个入口点。不知何故,HMR 使用 css 和 js 更改重新加载页面,但不会更改 html 内容。我已经尝试了很多来自 stackoverflow 和 github 问题的建议,但没有任何帮助。如有任何帮助,我将不胜感激。

const isDev = process.env.NODE_ENV === "development"

const filename = ext => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`;

const plugins = [
    new HTMLWebpackPlugin({
        template: 'index.html',favicon: './favicon.ico',filename: 'index.html',minify: {
            collapseWhitespace: !isDev
        },chunks: ['main']
    }),new HTMLWebpackPlugin({
        template: './another.html',filename: 'another.html',minify: {
                collapseWhitespace: !isDev
        },chunks: ['analytics']
    }),new MiniCssExtractPlugin({
        filename: filename('css'),}),new CleanWebpackPlugin(),new webpack.HotModuleReplacementPlugin(),]

    const cssLoaders = (loader) => {
        const loaders = [
            { loader: MiniCssExtractPlugin.loader },'css-loader'
        ];
        if (loader) { loaders.push(loader) }
        return loaders
    }


module.exports = {
    context: path.resolve(__dirname,'src'),mode: 'development',target: process.env.NODE_ENV === "development" ? "web" : "browserslist",entry: {
        main: {
            import: ['@babel/polyfill','./index.js']
        },analytics: ['./analytics.js'],},output: {
        filename: filename('js'),path: path.resolve(__dirname,'dist'),chunkFilename: "[name].bundle.js"
    },resolve: {
        extensions: ['.js','.json','.png'],alias: {
            '@assets': path.resolve(__dirname,'src/assets'),'@js': path.resolve(__dirname,"src/js"),'@css': path.resolve(__dirname,"src/css")
        }
    },devserver: {
        historyApiFallback: true,open: true,compress: true,hot: true,port: 5000,inline: true,plugins,devtool: isDev ? 'source-map' : false,optimization: {
        splitChunks: {
            chunks: 'all'
        },runtimeChunk: 'single',minimize: !isDev,minimizer: [
            new CssMinimizerPlugin(),new TerserPlugin()
        ],module: {
        rules: [
            {
                test: /\.m?js$/,exclude: /node_modules/,use: {
                  loader: 'babel-loader',options: {
                    presets: ['@babel/preset-env'],plugins: ['@babel/plugin-proposal-class-properties']
                  }
                }
            },{
                test: /\.css$/,use: cssLoaders()
            },{
                test: /\.s[ac]ss$/i,use: cssLoaders('sass-loader')
            },{
                test: /\.(png|jpg|svg|gif)$/,use: [{
                    loader: 'file-loader',options: {
                        name: "[name].[ext]"
                    }
                }]
            },{
                test: /\.(ttf|woff|woff2|eot)$/,use: [
                    {
                        loader: 'file-loader',options: {
                            name: '[name].[ext]'
                        }
                    }
                ]
            },]
    }
}

and `package.json` scripts

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development npx webpack --mode development","build": "cross-env NODE_ENV=production npx webpack --mode production","watch": "cross-env NODE_ENV=development npx webpack --mode development --watch","server": "cross-env NODE_ENV=development webpack serve --mode development --open"
  }
}
cbq676869 回答:热模块替换不会在更新 html 内容时重新加载,而是在 webpack 5 上的 css 和 js 上重新加载

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/815131.html

大家都在问