webpack热模块更换不起作用

Question

我试图在我的 webpack 配置中使用 HRM（热模块替换），首先我在 package.jsong 中设置了 --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.

我不确定这里缺少什么，但有人可以看到做错了什么？

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,
},