1

我正在尝试使用 webpack 根据路由对应用程序进行代码拆分。我在System.import中添加了标签。这是我的路线片段文件：

function errorLoading(error) {
  throw new Error(`Dynamic page loading failed: ${error}`);
}

// Loading modules!
function loadRoute(cb) {
  return module => cb(null, module.default);
}

<Route path="/about" getComponent = {(location, cb) => {
  System.import('../containers/legal/components/about/')
    .then(loadRoute(cb))
    .catch(errorLoading);
}}
/>

据我在文档中看到的，我们唯一需要基于路由进行代码拆分的是System.import在标签。我没有改变任何东西Webpack.config.js。无论如何，这是我的 webpack 配置：

const devConfig = {
  resolve: {
    extensions: ['*', '.js', '.jsx', '.json'],
  },
  stats: {
    color: true,
    reasons: true,
    chunks: true,
  },
  entry: {
    app: [
      'webpack-hot-middleware/client?reload=true',
      path.resolve('./src/index'),
    ],
    vendor: ['react', 'react-dom', 'reduxsauce'],
  },
  output: {
    path: path.resolve('public'),
    publicPath: '/',
    filename: 'bundle.[name].js',
  },
  devtool: 'source-map',
  target: 'web',
  plugins: [
    new ProgressBarPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({ 'process.env': webpackEnvs.development })
  ],
  module: {
    rules: [
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /(node_modules|bower_components)/ }
    ],
  },
};

最后，只创建 app 和 vendor js 文件。不会创建基于该特定路由的额外 js 文件。但即使在使用 System.import 之后，也不会创建单独的文件，但可以正常工作。

4

0 回答 0