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

我是新来的React，我跟着Facebook's Installation（创建一个新的应用程序）。为什么React需要webpack-dev-server运行？

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

然后我试图安装使用教程codecademy从头开始作出反应的环境自己。在这里，在我构建项目之后，我可以直接在Chrome中打开HTML并显示内容。

我的问题是：

为什么网页不会被显示在第一个方法，但第2个方法，而无需启动服务器运行？

编辑：

的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] 
};

来源

2017-09-21 unknownymouse

简单的答案..确定你为什么在你的codeacademy中运行'npm run build'和它做了什么。你应该能够弄清楚这一点。如果读完后仍然有问题，请回复 – Panther

@Panther在我的package.json中，构建脚本是'webpack'，启动脚本是'webpack-dev-server'。所以，在我的第二种方法中，我只是调用'webpack'来调用加载器。我没有调用'start'启动服务器。我用package.json编辑了我的问题。 – unknownymouse

我的意思是'webpack'实际上是运行（使用babel），uglify并建立你的'build/dist'文件夹。因此，从它们打开索引文件将显示所有必需的js/css存在的内容。在使用'dev-server'时，不会生成acutal文件。所需的js/css大多是来自文件系统的服务器。 – Panther

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

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

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

像HTML，你可以看到/static/pathToFile但不./static/pathToFile。

因此，根据你的第二个方法，尽量给路径transformed.js在你的HTML /transformed.js。它不显示任何东西。但是如果你运行npm run start然后用给定的端口号打开你的本地主机（就像第一种方法一样）。现在你可以看到你的React应用程序。

意见：始终由自己从头开始尝试建立您的环境。不要试图轻松设置Facebook的“创建新应用程序”等方法。请尝试Facebook的“添加对现有应用程序的反应”。你可以学习如何实际工作，就像今天一样。

提示：

尝试总是调试应用程序在网络浏览器！

例如，在你并公开Chrome的开发者工具打开你的第一个方法的HTML。

头以上的网络选项卡，并重新加载。

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

一下就可以看到返回状态，URL请求等

希望它能帮助！

来源

2017-09-21 11:12:47 SkrewEverything

感谢您的解释和提示！ – unknownymouse

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

回答

相关问题