Question

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

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之后，也只会创建单独的文件，但工作正常。

React路由器V3和webpack 2代码拆分不起作用

0 个答案: