导入库中的 webpack 代码拆分答案

【问题标题】：webpack code splitting in imported library导入库中的 webpack 代码拆分
【发布时间】：2017-04-27 05:51:20
【问题描述】：

我有一个 web 应用程序 A，我正在使用 webpack 2 构建它。我还有一个库 L，我也在使用 webpack 2 构建它； A 进口 L 来完成它的工作。到目前为止一切顺利。

当我尝试在我的库中使用require.ensure() 来对仅在某些代码路径中使用的相当大的依赖项进行代码拆分时遇到了麻烦。 Webpack 似乎可以正确构建库，并且我看到向库的输出目录发出了一个额外的块，但是当我运行 webpack-dev-server 来提供我的应用程序时，我收到浏览器控制台错误，抱怨块加载失败：

GET http://localhost:8081/0.index.js 404
Error: Loading chunk 0 failed.
  at HTMLScriptElement.onScriptComplete

0.index.js 确实是包含我的大胖依赖的库块。在我的库的 webpack 配置中设置 output.chunkFilename 确实更改了向 webpack-dev-server 发出的 HTTP 请求的 URL，但仍然导致 404：

GET http://localhost:8081/library-chunk-0.js

我正在为我的库使用这个 webpack 配置：

{
  entry: './src/index.js',

  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader'
    }]
  },

  output: {
    chunkFilename: 'library-chunk-[name].js',
    filename: 'index.js',
    library: 'my-library',
    libraryTarget: 'commonjs2',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  }
}

在我的 webapp 的输出目录中没有我的库的块。如何让我的库的所有块在我的 webapp 的输出目录中可用，以便它们可以由 webpack-dev-server 提供（因此在我分发 webapp 时存在）？

【问题讨论】：

标签： webpack

【解决方案1】：

webpack-dev-server、doesn't store bundle files on the disk，但会即时为他们服务。因此，您将无法在 dist 目录中找到它们，这不是问题。

我注意到您在配置对象上指定了output.library and output.libraryTarget。

由于您正在构建应用程序并且这些是用于编写库的特殊配置，因此您可能不需要它们。尝试删除它们，因为它们适合与异步块不同的场景并且可能会发生冲突。

【讨论】：