导入库中的webpack代码拆分

Question

我有一个webapp，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时出现)？

Answer 1

webpack-dev-server，doesn't store bundle files on the disk，但在飞行中为他们服务。所以您无法在dist目录中找到它们，这不是问题所在。

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