如何使用 webpack-dev-server 设置 create-react-app

Question

我正在尝试使用 webpack-dev-server 设置我的 create-react-app 实例。

这是我的 package.json 文件

{
  "name": "reactgs",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack-dev-server --entry ./node_modules/react-scripts/bin/react-scripts.js --output-filename ./dist/bundle.js --inline --progress",
  },
  "devDependencies": {
    "webpack-dev-server": "^2.9.1"
  }
}

我没有 webpack.config.js 文件。

当我运行

npm run build

输出显示为

下一行运行没问题。

npm start

我还在同一台机器上为不同的项目设置了 webpack。

有人知道如何为 create-react-app 正确配置 webpack 吗？

Answer 1

npm start 为您提供开箱即用的 HMR。它将使用 webpack-dev-server --hot 本身托管您的应用程序。你只需要挂钩 HMR 代码来告诉 webpack 要观看什么并根据需要重新加载。

这个 GitHub 对话提供了一个相当不错的简单解决方案，用于在有和没有 Redux 的情况下挂钩 HMR (https://github.com/facebookincubator/create-react-app/issues/2317)。

如何使用 webpack-dev-server 设置 create-react-app

How to setup create-react-app with webpack-dev-server

node.js

reactjs

webpack-dev-server

create-react-app