HTML 更改上的 Webpack 不会实时重新加载答案

【问题标题】：Webpack on HTML change does not Live ReloadHTML 更改上的 Webpack 不会实时重新加载
【发布时间】：2020-08-08 09:23:02
【问题描述】：

我有以下 Webpack 配置。

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    publicPath: 'dist',
    writeToDisk: true,
    open: true,
    liveReload: true,
    hotOnly: true,
  },
  entry: './src/js/app.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist/js'),
    publicPath: 'dist',
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [require('autoprefixer')];
              },
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: '../fonts/',
              publicPath: '../fonts/',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '../css/app.css',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

当我编辑 HTML 文件时，它不会像 nodemon 那样重新加载浏览器

这些是我的脚本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start:dev": "webpack-dev-server --hot --mode development"
  },

【问题讨论】：

而且您不小心忘记了 HtmlWebpackPlugin？ :)
@GrzegorzT。我已经在 dist 文件夹中创建了我的 .html 文件。如果有任何变化，我只想让它观看并重新加载它。

标签： webpack webpack-dev-server nodemon

【解决方案1】：

将devServer.watchContentBase 设置为true，如下所示：

module.exports = {
  //...
  devServer: {
    watchContentBase: true
  }
};

devServer.watchContentBase

布尔值

告诉 dev-server 监视 devServer.contentBase 选项提供的文件。默认情况下禁用。启用后，文件更改将触发整个页面重新加载。

（来自https://webpack.js.org/configuration/dev-server/#devserverwatchcontentbase）

【讨论】：