Webpack 4 - 创建供应商块

Question

在 webpack 3 配置中，我将使用以下代码创建单独的 vendor.js 块：

 entry: {
    client: ['./client.js'],
    vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'],
},

output: {
  filename: '[name].[chunkhash].bundle.js',
  path: '../dist',
  chunkFilename: '[name].[chunkhash].bundle.js',
  publicPath: '/',
},

plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
    }),
],

有了所有的更改，我不确定如何使用 Webpack 4 来实现。我知道 CommonChunksPlugin 已被删除，因此有一种不同的方法可以实现这一点。我也阅读 了本教程，但我仍然不确定提取运行时块并正确定义 output 属性。

编辑： 不幸的是，我在这里遇到了最受欢迎的答案的问题。看看 我的回答。

原文由 Tomasz Mularczyk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我找到了一个更短的方法来做到这一点：

 optimization: {
  splitChunks: { name: 'vendor', chunks: 'all' }
}

当 splitChunks.name 作为字符串给出时， 文档 说：“指定一个字符串或一个总是返回相同字符串的函数会将所有常见模块和供应商合并为一个块。”结合 splitChunks.chunks ，它将提取所有依赖项。

原文由 Motine 发布，翻译遵循 CC BY-SA 4.0 许可协议