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

【问题标题】：How to setup create-react-app with webpack-dev-server如何使用 webpack-dev-server 设置 create-react-app
【发布时间】：2018-03-14 04:15:25
【问题描述】：

我正在尝试使用 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？

【问题讨论】：

使用create-react-app，build 命令已预先配置为运行此命令：react-scripts build，它会处理所有事情。我不太明白为什么在 build 命令上需要 webpack-dev-server。通常，您不需要在构建时将包托管在开发服务器上。您通常会将生成的资产放在可以提供服务的其他地方。你的意图到底是什么？
我正在尝试让我的 create-react-app 使用 webpack-dev-server 执行热重载，还有其他方法吗？

标签： node.js reactjs webpack-dev-server create-react-app

【解决方案1】：

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

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

【讨论】：

我已经尝试了您建议的更改，但没有运气。我还读到默认情况下启用 HMR 以更改样式表，但这对我不起作用。我已经遵循了几个关于如何设置的视频指南，但仍然没有运气。我想这可能是因为我使用的是 1001 端口，因为我的 docker 设置为侦听端口 1001。
Webpack 开发服务器只接受在 localhost 上提供服务，这可能不适用于 Docker。您使用 Docker 进行本地开发有什么特别的原因吗？
我仍然调用 localhost:1001 来检索我的项目。我刚才在我的主机上运行了 create-react-app 并且一切正常。稍后我将尝试在端口 3000 上启动一个 docker 实例，并让您知道它是如何进行的。我主要只是使用 docker 作为 Virtual Box 的替代品，这样我就可以运行 linux。