html-webpack-plugin修改模板页面无法触发热浏览器刷新

Question

修改js浏览器可以刷新，但是修改模板页面浏览器不会刷新，请问该怎么配置？

webpcak.config.js如下

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    'index': './index.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve('./', 'dist')
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: [{
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }],
      exclude: path.resolve('./', 'node_modules/')
    }]
  },
  devServer: {
    proxy: {

    },
    historyApiFallback: true,
    hot: true,
    inline: true,
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      chunks: ['index']
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

Answer 1

devServer的contentBase设置成./dist 是什么意思？

一般都是 contentBase: './src',

Answer 2

请问你的问题解决了吗？我也遇到这个问题了

Answer 3

webpack.config.js文件，修改devServer.contentBase,他本来的作用是告诉服务器从哪个目录中提供内容。
因为热莫替换的缘故，如果我们把模板文件的目录加到这个配置中，就会导致我们修改模板，热莫替换检测到变化，从而刷新浏览器。~~~~

  devServer: {
        contentBase:[path.join(__dirname, "dist"),path.join(__dirname, "src/assets/index.html")],
        hot: true,
        watchContentBase: true,//其实是它的默认配置了
    },

其实本应该配置目录的(配置目录也是有效的)，但是我直接配置了文件，经过我的测试，我发现devserver始终会给出一个带有bundle.js的html,甚至是在这种情况的配置下

contentBase:[
          // path.join(__dirname, "dist"),
          // path.join(__dirname, "src/assets/"),
          path.join(__dirname, "src/assets/index.html"),
        ],

在contentBase中的三个路径，你可以改变他们的顺序，改变他们的组合，我随便试了几种，都能正常运行，这种健壮性，实在令人惊讶
另附配置文件中的其他关键配置

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
        contentBase:[
          // path.join(__dirname, "dist"),
          // path.join(__dirname, "src/assets/"),
          path.join(__dirname, "src/assets/index.html"),
        ],
        hot: true,
        watchContentBase: true,//其实是它的默认配置了
    },
  module: {
    rules: [
      
    ]
  },
  plugins: [
        new CleanWebpackPlugin(),
         new HtmlWebpackPlugin({
             title:"邀请",
            filename: 'index.html',
            template: 'src/assets/index.html'
         }),
         new webpack.HotModuleReplacementPlugin()

       ],
};