Webpack热重载对HTML文件无效。

Question

我能够在webpack中为我的JS和SCSS文件使用热模块替换，并且它很好用，但是当我尝试为HTML文件进行热重载时遇到了问题。另一个可行的选项是将"watchContentBase: true"属性添加到我的开发服务器属性中，但这会重新加载浏览器。我希望当我保存文件时，浏览器可以更新其内容，而无需完全重新加载页面。

<pre>
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        port: 8080,
        contentBase: path.resolve(__dirname, './src'),
        hot: true,
        open: true,
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html',
        }),
    ],
};
</pre>

======== Index Js entry point ========

import tripleMe from './tripleMe';
import './sass/main.scss';

if (module.hot) {
    module.hot.accept();
}

- ewcoder

---

你找到解决方案了吗？ - Rohit Kashyap

Answer 1

在Webpack 5中，你使用的contentBase属性已经切换为static。

devServer: {
      port: 8080,
      hot: "only",
      static: {
        directory: path.join(__dirname, './'),
        serveIndex: true,
      },
    },

- Maksym Dudyk