webpack在首次构建之前请求它们之前会生成一个异步（代码拆分）捆绑文件。

Question

我有一个简单的webpack @ 4 + @ loadable / component设置用于代码拆分，在构建它时，我可以看到我的捆绑包已经被组件分开了。问题是，当我请求它们时，这些捆绑软件应该在运行时加载。但是发生了什么事，他们在第一个渲染器上加载了。

webpack.client.config.js

module.exports = {
  name: 'client',
  target: 'web',
  entry: {
    main: [paths.clientSrcPath],
  },
  output: {
    path: path.join(paths.clientBuild, paths.publicPath),
    filename: '[name].js',
    publicPath: paths.publicPath,
    chunkFilename: '[name].chunk.js',
    libraryTarget: 'umd',
    library: '[name]_[hash]',
  },

  module: {
    rules,
    exprContextCritical: false,
  },
  optimization: {
    namedModules: true,
    noEmitOnErrors: true,
    splitChunks: {
      chunks: "all",
      minSize: 0,
    },
  },
  performance: {
    hints: false,
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new WriteFileWebpackPlugin(),
    new ErrorOverlayPlugin(),
    new WebpackNotifierPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new FriendlyErrors(),
    new LoadablePlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
};

component.js

....
const ModalPage = loadable(() => import('./components/Modal'));

class App extends React.Component {
  state = {
    ....,
  };

  render() {
    const { open } = this.state;
    return (
      <Fragment>
        <h2>
          Welcome To react..
        </h2>
        <Button variant="contained" color="primary" onClick={this.handleOpen}>Open Modal</Button>
        <ModalPage isOpen={open} handleClose={this.handleClose} />
      </Fragment>
    );
  }
}