为什么 React 需要 webpack-dev-server 来运行? [英] Why React needs webpack-dev-server to run?

问题描述

我是 React 的新手，我关注了

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

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

提示:

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

例如，在 chrome 中打开第一种方法 HTML 并打开开发人员工具.

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

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

点击它可以查看返回状态、请求的 url 等.

希望有帮助！

I'm new to React and I followed Facebook's Installation (Create a New App).

So every time I need to run the app, it needs to start a server. When I try to open the build version in chrome( opening HTML directly ), nothing gets displayed.

Then I tried to setup React environment myself from scratch using codecademy tutorial. Here, after I build the project, I can directly open the HTML in chrome and the contents are displayed.

My question is:

Why webpage doesn't get displayed in the 1st method but 2nd method runs without starting server?

---

Edit:

package.json for 2nd method:

{
  "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]
};

解决方案

The problem is: path to the other files in the HTML.

When the webpack-dev-server is run from the directory, it assumes it is the root of the server.

So, if you open your app's HTML(build/index.html) created with Facebook tutorial, you can see that the path to other files are given as absolute path but not as a relative path.

Like in HTML you can see /static/pathToFile but not ./static/pathToFile.

So, according to your 2nd method, try to give the path to transformed.js as /transformed.js in your HTML. It doesn't display anything. But if you run npm run start and then open your localhost with given port number(just like in the 1st method). Now you can see your React app.

Opinion: Always try to setup your environment by yourself from scratch. Don't try easy to setup methods like Facebook's "create new app". Instead try Facebook's "Adding React to an Existing Application". You can learn how things actually work, like today.

Tip:

Try to debug the app always in your web browser!

For example, open your 1st method HTML in your chrome and open developer tools.

Head over to the network tab and reload.

Hover-over the failed file to see what is the error. You can see ERR_FILE_NOT_FOUND.

Click on it to see return status, url requested etc.

Hope it helps!

这篇关于为什么 React 需要 webpack-dev-server 来运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！