Question

我有以下配置文件：

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

var DIST_DIR = path.resolve(__dirname,"dist");
var SRC_DIR = path.resolve(__dirname,"src/app");
const HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {
  entry: 
  {
    app: SRC_DIR,
    vendor: ['react'],
  },
  output: {
    path: DIST_DIR,
    filename: "[name].bundle.js",
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: 10,
      filename: '[name].bundle.js',
    }),
    new HtmlWebpackPlugin({
        template: path.join(__dirname +'/src', '/index.html'),
        filename: 'index.html',
        inject: 'body',
    }),
  ],

  module:{
    loaders:[
      {
        test: /\.(js)?/,
        include: SRC_DIR,
        exclude: /node_modules/, 
        loader: "babel-loader", 
        query:{
          presets:['react','es2015','stage-2'],
        }
      }
    ]
  },
}

module.exports = config;

我正在获取块文件，如下所示：

路由器配置为：

return (<div>
    <Router history={browserHistory}>
        <div>
            here.       
            <div>
                <nav className="navbar navbar-inverse">
                <div className="container-fluid">
                  <a className="navbar-brand" href="#">Home</a>
                  <ul className="nav navbar-nav">
                    <li><Link to="/profile">Profile</Link></li>
                    <li><Link to="/address">address</Link></li>
                    <li><Link to="/home">home</Link></li>
                  </ul>
                </div>
              </nav>
            </div>
             <Route path="/profile" getComponent={(location, cb) => {System.import('./Profile') .then((module) => cb(null, module.default)) .catch((error) => console.error('Dynamic page loading failed', error));}}/>
             <Route path="/home" getComponent={(location, cb) => {System.import('./Home') .then((module) => cb(null, module.default)) .catch((error) => console.error('Dynamic page loading failed', error));}}/>
             <Route path="/address" getComponent={(location, cb) => {System.import('./Address') .then((module) => cb(null, module.default)) .catch((error) => console.error('Dynamic page loading failed', error));}}/>
        </div>
    </Router> 
</div>
    );

但是，我只获得了根页。

http://localhost:8083/ looks like:

http://localhost:8083/address看起来一样：

Answer 1

尝试在配置output属性

中包含此内容

output: {
  ...
  publicPath: '/'
}

Webpack打破了块但没有动态加载

1 个答案: