Webpack，DedupePlugin不使用代码拆分和ProvidePlugin吗？

Question

以下是webpack ProvidePlugin配置：

new webpack.ProvidePlugin({
  util: path.join(src, 'util.js'),
  API: path.join(src, 'api.js')
});

编译后，我的项目的dist目录下有很多chunks。

每个chunk都使用API和Util，每个chunk都有API和Util代码。看起来DedupePlugin不工作了。

我希望将API和Util提取到单个chunk中，或者添加到条目bundle文件中。

我该怎么做呢？

Answer 1

听起来像是你在找CommonsChunkPlugin

entry: {
 api: path.join(src, 'api.js'),
 utils: path.join(src, 'util.js'),
 app: "./entry"
}

...

new CommonsChunkPlugin({
  name: "commons",
  // (the commons chunk name)

  filename: "commons.js",
  // (the filename of the commons chunk)

  chunks: ["api", "util"],
  // (Only use these entries)
})

只需确保您在主应用程序之前加载了公共块

<script src="commons.js" charset="utf-8"></script>
<script src="entry.bundle.js" charset="utf-8"></script>