Question

以下是webpack ProvidePlugin config：

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

编译完成后，我项目的chunks目录中有很多dist。

每个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>

Webpack，DedupePlugin无法使用代码拆分和ProvidePlugin？

1 个答案: