javascript - Webpack：--hot 或 HotModuleReplacementPlugin 不起作用

Question

我正在开发一个小的 Isomorphic React App，我想用 webpack 设置 HMR 工具。我已经尝试过 wbpack-dev-server --hot 或 HotModuleReplacementPlugin 但它们都不起作用......

这是 webpack.config.js 和 package.json。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var fs = require('fs');
let webpack = require('webpack');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

var config = { // la configuration commune pour les 2 modes.
  devtool: 'inline-source-map',
  context: path.resolve(__dirname, 'app'),
  entry: {
    '/bundle-app': ['babel-polyfill','./clientside/indexClient.js'],
    '/components/bundle-components': ['babel-polyfill','./components/App.js','./components/Form.js', './components/objetform/Home.js', './components/objetform/SetDB.js'],
    '/server/bundle-server': ['babel-polyfill','./serverside/server/createserver/app.js','./serverside/server/createserver/indexServer.js','./serverside/server/renderpage/renderFullPage.js','./serverside/server/renderpage/routerPage.js','./serverside/server/request/routerDB.js','./serverside/server/request/routerSetDB.js','./serverside/server/routes/routes.js',],
    '/services/bundle-services': ['./serverside/services/getMongooseData.js','./serverside/services/setMongooseData.js', './serverside/services/models/Employe.js'],
    '/assets/stylesheets/style': './assets/stylesheets/style.css',

  },
  target:'node',
  output: 
  {
    path: path.resolve(__dirname, 'build'), // path.resolve(__dirname, 'build'), // on crée l'application de sortie dans un dossier "public"
    filename: '[name].js', // les fichier bundle seront dans le chemin qui est le nom des fichiers d'entrées
  },
  module: 
  {
    rules: [
      {
        test: /\.(js|jsx)$/, // pour les fichiers de type js et jsx
        loader: 'babel-loader', // on charge babel un transcompileur 
        exclude: /node_modules/,
        options: 
        {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      },
      {
        test:/\.css$/,
          use:[
            {
              loader: MiniCssExtractPlugin.loader,
              options:
              {
                publicPath: '../../../build'
              },
            },
            {loader: 'css-loader'},
          ]
      }
    ]
  },  
  plugins: [
    //new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css', chunkFilename: '[id].css'
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
};

module.exports = (env, argv) =>
{
  if (argv.mode === 'development') // la configuration en plus en mode dévelopement
  {
    devtool = 'eval'

    config.devServer = { // mise en place pour le serveur test
      contentBase: path.resolve(__dirname, 'build'),
      inline: true,
      hot: true,
    }

  }

  if (argv.mode === 'production') // la configuration en plus en mode production
  {
    devtool = 'source-map'
  }
    return config;
}

{
  "name": "ssr-react-router-mongoose-isomorphic-app",
  "version": "1.0.0",
  "description": "isomorpic app",
  "private": true,
  "scripts": {
    "build:server": "babel ./app/server -d build/server",
    "build:watch:server": "babel ./app/server -d build/server --watch",
    "build:client": "webpack --mode development --config webpack.config.js/  --progress ",
    "build:watch:client": "webpack-dev-server --config ./webpack.config.js --hot",
    "build:prod": "npm run build:server && npm run build:client",
    "start": "npm run build:prod && NODE_ENV=production node ./build/server/bundle-server.js",
    "start:dev": "parallelshell \"npm run build:watch:client\" \"nodemon ./build/server/bundle-server.js\" ",
    "start:dev:client": "webpack-dev-server"
  },
  "author": "Rando Mathias",
  "license": "ISC",
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mongoose": "^5.10.6",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.11.6",
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.0",
    "file-loader": "^6.1.0",
    "mini-css-extract-plugin": "^1.2.1",
    "nodemon": "^2.0.4",
    "parallelshell": "^3.0.2",
    "resolve-url-loader": "^3.1.2",
    "style-loader": "^2.0.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

有关信息，在热重新加载之前，我使用了npm命令：npm run build:client然后npm run start:dev。此外，当我保存我的代码时，powershell 确实会响应，但它不会编译新代码或刷新浏览器。它确实在powershell中打印：

‼｢wdm｣：哈希：09c22a67c879a7645c8e 版本：webpack 4.44.2 时间：1716ms 构建于：2020-11-03 9:28:33 资产大小块
块名称 /assets/stylesheets/style.911d579609fd270f8926.hot-update.js 1.86 KiB /assets/stylesheets/style, /assets/stylesheets/style [emitted] [immutable] [hmr] /assets/stylesheets/style, /assets/ stylesheets/style /assets/stylesheets/style.css 3.18 KiB /assets/stylesheets/style [发出] /assets/stylesheets/style /assets/stylesheets/style.js 102 KiB /assets/stylesheets/style [发出] /assets/样式表/样式 /bundle-app.911d579609fd270f8926.hot-update.js 11.9 KiB /bundle-app, /bundle-app [emitted] [immutable] [hmr] /bundle-app, /bundle-app /bundle-app.js 3.02 MiB /bundle-app [发出] /bundle-app /components/bundle-components.911d579609fd270f8926.hot-update.js
11.9 KiB /components/bundle-components, /components/bundle-components [发射] [不可变] [hmr] /components/bundle-components, /components/bundle-components /components/bundle-components.js 3.02 MiB /components/ bundle-components [emitted] /components/bundle-components /server/bundle-server.911d579609fd270f8926.hot-update.js 11.9 KiB /server/bundle-server, /server/bundle-server [emitted] [immutable] [hmr] /server/bundle-server, /server/bundle-server /server/bundle-server.js 13.3 MiB /server/bundle-server [发出] /server/bundle-server /services/bundle-services.js 8.37 MiB /services/bundle-services [发出] /services/bundle-services 911d579609fd270f8926.hot-update.json 152 字节
[发出] [不可变] [hmr] 入口点 /bundle-app = /bundle-app.js /bundle-app.911d579609fd270f8926.hot-update.js /bundle-app.911d579609fd270f8926.hot-update.js 入口点 /components/bundle -components = /components/bundle-components.js /components/bundle-components.911d579609fd270f8926.hot-update.js /components/bundle-components.911d579609fd270f8926.hot-update.js 入口点 /server/bundle-server = /server/ bundle-server.js /server/bundle-server.911d579609fd270f8926.hot-update.js /server/bundle-server.911d579609fd270f8926.hot-update.js 入口点 /services/bundle-services = /services/bundle-services.js 入口点/assets/stylesheets/style = /assets/stylesheets/style.css /assets/stylesheets/style.js /assets/stylesheets/style.911d579609fd270f8926.hot-update.js /assets/stylesheets/style.911d579609fd270f8926.hot-update。 js [./components/objetform/Home.js] 6.33 KiB {/bundle-app} {/components/bundle-components} {/server/bundle-server} [内置] + 971 个隐藏模块

我在Visual Studio Code上。

提前致谢。

标签： javascriptreactjswebpackbundlehot-reload