时间戳

首页 > 解决方案 > React 和 Webpack 开发服务器：热重载不起作用

javascript - React 和 Webpack 开发服务器：热重载不起作用

问题描述

我有一个带有相当简单的 Webpack 设置的 React 应用程序，我想使用 Webpack Dev Server 并启用热重载。感觉就像我已经阅读了几乎所有解决这个问题的答案......

包.json

"dev": "NODE_ENV=dev webpack-dev-server --hot --inline --open --progress --mode development --content-base dist --config webpack.dev.js",

webpack.common.js

devtool: "source-map",
  entry: [
    "babel-polyfill",
    "./src/client/index.js"
  ],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/assets/"
  }

webpack.dev.js 

const common = require("./webpack.common.js");

module.exports = merge(common, {
  devtool: "inline-source-map",
  devServer: {
    compress: true,
    contentBase: path.resolve(__dirname, "dist"),
    index: "index.html",
    stats: "normal",
    inline: true,
    clientLogLevel: "info"
  },
  mode: "development"
});

为了运行这个项目，我运行yarn run dev它，它会加载 webpack-dev-server 并在浏览器中打开 React 应用程序，但是它不会热重载。我不确定它是否会重新构建 bundle.js 文件，因为重新刷新浏览器时，它仍然会加载旧版本的代码。

标签： javascriptreactjswebpackwebpack-dev-server

解决方案

您正在加载静态配置页面。静态包是磁盘上的文件，它会在你运行 webpack build 命令后重新创建。当它准备好发布时，您将在生产中使用静态配置。

您需要从 webpack 虚拟文件系统加载动态包，它是服务器，并且可以从绑定 webpack 开发服务器的 url 访问。例如http://localhost:8080/dist/bundle.js. 每次更改源时，这将由 webpack 开发服务器更新。

推荐阅读