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

Question

I am new to webpack-dev-server and have this question. 我是webpack-dev-server的新手，并有此问题。 Can you please explain and help me to fix it? 您能解释一下并帮助我修复它吗？

First, I am sure my application is running correctly without webpack-dev-server. 首先，我确定我的应用程序在没有webpack-dev-server的情况下可以正常运行。 However, using Webpack-dev-server to start a React App didn't return my hello world page, instead it returned my directory structure... I believe I may miss something here. 但是，使用Webpack-dev-server启动React App并没有返回我的世界世界页面，而是返回了我的目录结构...我相信我在这里可能会错过一些东西。

Without React, I can first run webpack --config webpack.config.js to create my bundle.js. 如果没有React，我可以先运行webpack --config webpack.config.js来创建我的bundle.js。 And then, execute webpack-dev-server --open to open my main page. 然后，执行webpack-dev-server --open打开我的主页。

Now this procedure doesn't work for me when I am trying to start a React app. 现在，当我尝试启动React应用程序时，此过程对我不起作用。 It turns my development directory instead as the screenshot below: 它变成了我的开发目录，而不是下面的截图：

My hello world app is: 我的世界应用程序是：

Hello.js: 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: 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: 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

It's because your index.html is inside /public and not in the root of the website. 这是因为您的index.html位于/ public内部，而不位于网站的根目录中。 If you browse to http://localhost:8080/public you should find it works 如果浏览到http：// localhost：8080 / public ，则应该可以正常使用

Answer 2

Because you don't setup webpack dev server properly. 因为您没有正确设置webpack开发服务器。 Add 加

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

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

Also you have to set publicPath on output in your webpack config. 另外，您还必须在webpack配置中的output上设置publicPath 。 Because you called bundle.js in index.html like this <script src= "bundle.js"></script> (no /public folder) 因为您在index.html中像这样<script src= "bundle.js"></script> （没有/public文件夹）调用bundle.js

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

Hope this helps 希望这可以帮助

为什么使用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