尽管我已经完成了“内联：真”，但 Webpack 开发服务器热重载不能与 reactjs 一起使用？

Posted 2023-02-22

【中文标题】尽管我已经完成了“内联：真”，但 Webpack 开发服务器热重载不能与 reactjs 一起使用？

【英文标题】：Webpack dev server hot reloading not working with reactjs, though i have done "inline:true"?

【发布时间】：2018-07-16 13:22:39

【问题描述】：

为什么热模块替换在 webpack 开发服务器上停止工作？

我的 package.json 文件：

  "name": "routing-react",
  "version": "1.0.0",
  "description": "Just a little ReactJS Training Ground",
  "main": "index.js",
  "scripts": 
    "start": "npm run build",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
    "build:prod": "cp src/index.html dist/index.html && webpack -p"
  ,
  "keywords": [
    "react"
  ],
  "author": "gd10",
  "license": "MIT",
  "dependencies": 
    "css-loader": "^0.28.9",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-hot-loader": "^3.1.3",
    "style-loader": "^0.20.1",
    "webpack-hot-middleware": "^2.21.0"
  ,
  "devDependencies": 
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-2": "^6.11.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  

我也设置了：

devserver = 
    historyApiFallback: true,
    inline: true,
    hot: true

但这并没有帮助。

webpack.config.js 文件：

var webpack = require('webpack');
var path = require('path');

var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');

var config = 
    devServer: 
        historyApiFallback: true,
        contentBase: './',
        inline: true,
        hot:true,
        port: 3004,
    ,
    entry: SRC_DIR + '/app/index.js',
    output: 
        path: DIST_DIR + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    ,
    module: 
        loaders: [
            
                test: /\.js?/,
                include: SRC_DIR,
                loader: 'babel-loader',
                query: 
                    presets: ['react', 'es2015', 'stage-2']
                
            ,
            
                test: /\.css?/,
                loader:'style-loader!css-loader'
            ,
        ]
    
;

module.exports = config;

之前我遇到了 CSS 加载器问题，在 webpack.config.js 中添加加载器后，我的 webpack 停止了。 如何让 Hot 模块工作？

【参考方案1】：

您需要激活热模块更换插件，完整说明：https://webpack.js.org/guides/hot-module-replacement/