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目录中找到它们，这不是问题所在。

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

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

导入库中的webpack代码拆分

1 个答案: