Question

我是webpack-dev-server的新手并且有这个问题。你能解释一下并帮助我解决它吗？

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

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

现在，当我尝试启动React应用程序时，此过程对我不起作用。它将我的开发目录改为下面的屏幕截图：

我的hello world app是：

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 dev服务器。添加

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

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

此外，您必须在webpack配置中的publicPath上设置output。因为您在index.html中调用bundle.js，如<script src= "bundle.js"></script>（无/public文件夹）

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

希望这有帮助

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

2 个答案: