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