Webpack热模块替换未能正常工作。

Question

我正在尝试在webpack配置中使用HRM（热模块替换），首先我已经在package.json中设置了--hot选项：

"scripts": {
    "start": "webpack-dev-server --hot"
}

同时请注意，我正在使用HtmlWebpackPlugin来为我创建一个index.html文件，并将其放在“build”目录中，以下是我的完整webpack.config.js文件：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackManifestPlugin = require('webpack-manifest-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// const webpack = require('webpack');
const mode = "development";

module.exports = {
  mode: mode,
  // watch: true,
  devtool: "cheap-module-eval-source-map",
  devServer: {
    port: 9000,
    // contentBase: path.resolve(__dirname, 'build')
  },
  entry: {
    application: "./src/javascripts/index.js",
    admin: "./src/javascripts/admin.js"
  },
  output: {
    filename: mode === 'production' ? "[name]-[contenthash].js" : '[name].[hash].js',
    path: path.resolve(__dirname, 'build'),
    // publicPath: '/'
  },
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename: mode === 'production' ? "[name]-[contenthash].css" : "[name]-[hash].css",
        hmr: mode === 'production' ? false : true
    }),
    new CleanWebpackPlugin(),
    new WebpackManifestPlugin(),
    new HtmlWebpackPlugin({
      template: './src/template.html',
      // filename: '../index.html'
    })
    // new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer')({
                  overrideBrowserslist: ['last 3 versions', 'ie > 9']
                })
              ]
            }
          },
        ],
      },
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer')({
                  overrideBrowserslist: ['last 3 versions', 'ie > 9']
                })
              ]
            }
          },
          'sass-loader'
        ],
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 8192,
              name: '[name].[hash:7].[ext]'
            },
          },
          {
            loader: 'image-webpack-loader'
          }
        ],
      }
    ]
  }

}

如您所见，我主要使用的入口是./src/javascripts/index.js，在这里导入了一个名为application.scss的文件：

import application from "../stylesheets/application.scss"

application.scss 包含:

span{
  background-color: blue;
}

我希望在更改html页面中的span标签的背景颜色时，能够实现页面的热重载。

当我运行 npm run start 命令后，更改了span标签的背景颜色，更新会第一次生效但会进行整个页面的重新加载，如果我再试图更改背景颜色，则不会有任何更新，并且控制台中只会显示以下内容：

[HMR] Nothing hot updated. log.js:24
[HMR] App is up to date.

我不确定我错了什么，但是有人可以看到我做错了什么吗？

（这是关于IT技术的问题）

- medBouzid

Answer 1

根据文档，它在尝试重新加载整个页面之前尝试使用HMR进行更新。

因此，假设如果更新失败，它将重新加载整个页面，这就是你所看到的情况。

你是否尝试在主要入口文件的末尾包含以下内容？

if (module.hot) {
  module.hot.accept(function (err) {
    console.log('An error occurred while accepting new version');
  });
}

此外，检查Chrome开发者工具中network选项卡中-hot.js文件请求的状态码是否为200、404或500。也许你的服务器崩溃了或没有正确地提供它们。

在webpack中确保你也有以下内容。

devServer: {
  // contentBase: './dist', // this watches for html changes, apparently?
  contentBase: path.resolve(__dirname, 'build') // in your specific case maybe?
  hot: true,
},

- Cody Ｇ

---

我已经加入了你建议的代码，但没有出现错误，而且我的控制台中所有-hot.js文件都是200，但当我看到终端时，它仍然显示“没有热更新”，我注意到这里有一些东西：Entrypoint undefined = index.html 这是一个屏幕截图：http://i.imgur.com/zybOtvZ.png - medBouzid

似乎存在一个与htmlWebpackPugin有关的问题，我找到了这个解决方案https://github.com/cxphoe/html-webpack-hot-plugin，但对我无效。 - medBouzid

类似 https://github.com/webpack/webpack-dev-server/issues/1271 - Cody Ｇ

我不确定我理解了你的意思，但我正在更改的是CSS文件，而HMR应该将该更改反映到HTML页面中，如果我更改颜色，则页面上的颜色应该得到更新，就这么简单！ - medBouzid

尝试将 contentBase 设置为您的构建目录？ - Cody Ｇ

感谢@CodyＧ。在我的情况下，问题是我有： devServer: { watchFiles: ['ui/**/*'], 但应该是：devServer: { watchFiles: ['ui/dist/**/*'], - arczi