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时，我更改了跨度的背景色，第一次进行更新时会起作用（但是它会重新加载整个页面），然后如果我尝试更改背景再次变色，什么也没有更新，我在控制台中看到的是：

[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开发人员工具的-hot.js标签的network文件请求-它们的状态为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,
},

webpack热模块更换不起作用

1 个答案: