如何在 Webpack 中将 vendors/libs 分块到自己的文件中？

Question

如何使用CommonsChunkPlugin将多个供应商分块到他们自己的分块文件中？

我想将每个库分别分块到它们自己的分块文件中，并且有效，

commons.[chunkhash].js
react.[chunkhash].js
lodash.[chunkhash].js
bluebird.[chunkhash].js
app.[chunkhash].js

并且在使用 OccurenceOrderPlugin 时，请确保无论应用程序代码如何更改（或），无论需要模块的次数如何，对于所有不需要的库，它都会获得相同的 chunkhash t改变。

是否有可能以某种方式确定或配置块 ID 的优先级？

Answer 1

您可以为每个库创建一个条目并使用 CommonsChunkPlugin。这是粗略的想法：

module.exports = {
  entry: {
    ...
    react: 'react',
    lodash: 'lodash',
    ...
  },
  ...
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('react', 'react.[chunkhask].js'),
    ...
  ]
};

类似的东西可以作为你的起点。另请参阅官方文档中的 Split app and vendor code。

如何在 Webpack 中将 vendors/libs 分块到自己的文件中？

How to chunk vendors/libs into their own file in Webpack?

javascript

webpack