为什么React需要运行webpack-dev-server？

Question

我是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]
};

Answer 1

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

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

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

与HTML一样，您可以看到/static/pathToFile但不是./static/pathToFile。

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

意见：始终尝试自己设置环境。不要尝试像Facebook的“创建新应用程序”那样轻松设置方法。而是尝试Facebook的“为现有应用程序添加React”。您可以了解事情的实际工作方式，例如今天。

提示：

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

例如，在Chrome中打开第一个方法HTML并打开开发人员工具。

转到网络标签并重新加载。

将鼠标悬停在失败的文件上以查看错误是什么。您可以看到ERR_FILE_NOT_FOUND。

点击它查看返回状态，请求网址等。

希望它有所帮助！