webpack 熱模塊更換不工作

Question

我試圖在我的 webpack 配置中使用 HRM（熱模塊更換），首先我在 package.jsong 中設置了 --hot 選項：

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

另請注意，我正在使用 HtmlWebpackPlugin 為我創建一個 index.html 文件並將其放在“構建”目錄中，這是我的完整 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 頁面中的跨度的背景顏色時，我都想重新加載頁面。

當我運行npm run start然后我更改跨度的背景顏色，更新第一次工作（但它確實是一個完整的頁面重新加載）然后如果我嘗試再次更改背景顏色，沒有任何更新，我在控制台中看到的所有內容這是：

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