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

Question

我是 React 的新手，我遵循了 Facebook's Installation（创建新应用）。

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

然后我尝试使用 codecademy 教程自己从头开始设置 React 环境。这里我建工程后直接打开chrome里的HTML就可以显示里面的内容了

我的问题是：

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

编辑:

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 然后用给定的端口号打开你的本地主机（就像第一种方法一样）。现在你可以看到你的 React 应用了。

意见：始终尝试自己从头开始设置您的环境。不要尝试像 Facebook "create new app" 这样容易设置的方法。而是尝试 Facebook 的 "Adding React to an Existing Application"。您可以了解事物的实际运作方式，例如今天。

提示:

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

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

转到网络选项卡并重新加载。

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

单击它可以查看 return 状态、url 请求等

希望对您有所帮助！

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

Why React needs webpack-dev-server to run?

reactjs

webpack

webpack-dev-server

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

Why React needs webpack-dev-server to run?

reactjs

webpack

webpack-dev-server

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