为什么使用Webpack-dev-server启动React App返回我的目录结构

Question

我是webpack-dev-server的新手，并有此问题。 您能解释一下并帮助我修复它吗？

首先，我确定我的应用程序在没有webpack-dev-server的情况下可以正常运行。 但是，使用Webpack-dev-server启动React App并没有返回我的世界世界页面，而是返回了我的目录结构...我相信我在这里可能会错过一些东西。

如果没有React，我可以先运行webpack --config webpack.config.js来创建我的bundle.js。 然后，执行webpack-dev-server --open打开我的主页。

现在，当我尝试启动React应用程序时，此过程对我不起作用。 它变成了我的开发目录，而不是下面的截图：

我的世界应用程序是：

Hello.js：

var React = require("react");
var ReactDOM = require("react-dom");

var Hello = React.createClass({
    render: function(){
        var message = "Hello, world!!!!!";
        return (
            <div>
                {message}
            </div>
            );
    }
});


ReactDOM.render(
    <Hello />,
    document.getElementById("root")
);

index.html的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

  </head>
  <body>
    <div id="root"></div>
    <script src= "bundle.js"></script>
    <h2>HEY!</h2>
  </body>
</html>

webpack.config.js：

module.exports = {
    entry: "./app/components/Hello.js",
    output: {
        filename: "public/bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015", "react"]
                }
        }]
    }

};

Answer 1

这是因为您的index.html位于/ public内部，而不位于网站的根目录中。 如果浏览到http：// localhost：8080 / public ，则应该可以正常使用

Answer 2

因为您没有正确设置webpack开发服务器。 加

devServer: {
    contentBase: "./public"
},

请参阅webpack-dev-server配置列表https://webpack.github.io/docs/webpack-dev-server.html#api

另外，您还必须在webpack配置中的output上设置publicPath 。 因为您在index.html中像这样<script src= "bundle.js"></script> （没有/public文件夹）调用bundle.js

output: {
    publicPath: '/',
    filename: 'bundle.js'
},

希望这可以帮助

为什么使用Webpack-dev-server启动React App返回我的目录结构

问题描述

2 个解决方案

解决方案1
2 2017-02-24 23:21:37

解决方案2
2 已采纳 2017-02-25 06:58:00

为什么使用Webpack-dev-server启动React App返回我的目录结构

问题描述

2 个解决方案

解决方案1 2 2017-02-24 23:21:37

解决方案2 2 已采纳 2017-02-25 06:58:00

解决方案1
2 2017-02-24 23:21:37

解决方案2
2 已采纳 2017-02-25 06:58:00