Question

我有以下配置

webpack.config.js：

var webpack = require("webpack");
var path = require("path");

var DIST_DIR = path.resolve(__dirname,"dist");
var SRC_DIR = path.resolve(__dirname,"src");

var config = {
    entry: 
    {
        'index':SRC_DIR + "/app/index.js",
        'home':SRC_DIR + "/app/home.js",
        'profile':SRC_DIR + "/app/profile.js"
    },
    output: {
        path: DIST_DIR + '/app',
        filename: "[name].bundle.js",
        publicPath: "/app/"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "common",
            chunks: ["index", "home","profile"]
        })],
    module:{
        loaders:[
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader", 
                query:{
                    presets:['react','es2015','stage-2'],
                }
            }
        ]
    },
     devServer: {
      historyApiFallback: true
  }
}

module.exports = config;

现在，我希望在index.js的情况下加载common.bundle + index.bundle，在profile.js的情况下加载common.bundle + profile.bundle，依此类推。

我只有一个index.html文件，我想在每次点击相应的网址时分别加载这三个包。

<!DOCTYPE html>
<html>
<head>
    <title>Reactjs Basic</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="container-fluid">
            <div class="row">
                <div class="col-md-offset-2 col-md-8">
                    <div id="app"></div>
                </div>
            </div>
        </div>

<script src="/app/index.bundle.js"></script>

</body>
</html>

只有一个index.html文件可以吗？我需要多个HTML吗？

使用reactjs SPA的多个条目

0 个答案: