为什么 React 需要 webpack-dev-server 才能运行？答案

【问题标题】：Why React needs webpack-dev-server to run?为什么 React 需要 webpack-dev-server 才能运行？
【发布时间】：2017-09-21 09:49:07
【问题描述】：

我是 React 新手，我关注了 Facebook's Installation（创建一个新应用）。

所以每次我需要运行应用程序时，它都需要启动一个服务器。当我尝试在 chrome 中打开构建版本（直接打开 HTML）时，什么都没有显示。

然后我尝试使用codecademy 教程从头开始设置 React 环境。这里我建好项目后直接用chrome打开html就可以显示内容了。

我的问题是：

为什么网页在第一种方法中没有显示，而第二种方法在没有启动服务器的情况下运行？

编辑：

package.json 用于第二种方法：

{
  "name": "practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

webpack.config.js：

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: __dirname + '/app/index.js',
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  output: {
    filename: 'transformed.js',
    path: __dirname + '/build'
  },
  plugins: [HTMLWebpackPluginConfig]
};

【问题讨论】：

简单答案.. 确定您在代码学院中运行npm run build 的原因及其作用。你应该能够弄清楚这一点。如果您在阅读后仍有疑问，请回复
@Panther 在我的 package.json 中，构建脚本是 webpack，启动脚本是 webpack-dev-server。所以，在我的第二种方法中，我只是调用webpack 来调用加载程序。我没有打电话给start 来启动服务器。我用 package.json 编辑了我的问题。
我的意思是在webpack 中实际上转换（使用 babel）、丑化和构建你的build/dist 文件夹。因此，从它们打开索引文件会向您显示所有必需的 js/css 都存在的内容。使用dev-server 时不会生成任何实际文件。所需的 js/css 主要是来自内存文件系统的服务器。
在您的create-react-app 方法中，如果您使用npm run build，然后从build 目录打开索引，您应该会看到两个教程的相同行为。
@Panther 没用。如下所述，问题出在路径上。我尝试了他/她提到的第二种方法（更改我的.js 文件的路径）并且它有效，我明白出了什么问题。

标签： reactjs webpack webpack-dev-server

【解决方案1】：

问题是：HTML 中其他文件的路径。

当webpack-dev-server 从目录运行时，它假定它是服务器的根目录。

因此，如果您打开使用 Facebook 教程创建的应用程序的 HTML(build/index.html)，您可以看到其他文件的路径是绝对路径，而不是相对路径。

就像在 HTML 中一样，您可以看到 /static/pathToFile，但看不到 ./static/pathToFile。

因此，根据您的第二种方法，尝试在您的 HTML 中将 transformed.js 的路径指定为 /transformed.js。它不显示任何内容。但是如果你运行npm run start 然后用给定的端口号打开你的本地主机（就像在第一种方法中一样）。现在你可以看到你的 React 应用了。

意见：始终尝试自己从头开始设置环境。不要尝试像 Facebook 的“创建新应用”这样的简单设置方法。相反，请尝试 Facebook 的“将 React 添加到现有应用程序”。您可以了解事物的实际运作方式，就像今天一样。

提示：

尝试始终在您的网络浏览器中调试应用程序！

例如，在您的 chrome 中打开您的第一种方法 HTML 并打开开发者工具。

前往网络标签并重新加载。

将鼠标悬停在失败的文件上以查看错误所在。你可以看到ERR_FILE_NOT_FOUND。

点击查看返回状态、请求的网址等

希望对你有帮助！

【讨论】：

感谢您的解释和提示！