循环html-webpack-plugin后,CommonsChunkPlugin无法提取公共js

Question

问题描述

webpack打包多页面，使用html-webpack-plugin循环页面后，页面引用的js文件里的公共部分，CommonsChunkPlugin提取不出来

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

function getEntry(globPath) {
var entries = {},

basename;

glob.sync(globPath).forEach(function (entry) {

basename = path.basename(entry, path.extname(entry));
entries[basename] = entry;

});
return entries;
}

var pages = getEntry('src/pages/*/.html');

for (var pathname in pages) {
var conf = {

filename: process.env.NODE_ENV === 'testing'
  ? pathname + '.html'
  : config.build[pathname],
template: pages[pathname],
inject: true,
minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'app', 'vender', 'common', pathname]

}
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

5个page文件中共同引用的代码，提取不出来，还是在各自的文件内。公共代码通过import引入的一个公共js文件中的内容。

Answer 1

你怕是理解错了这个 chunks 字段的意义，试试这里只写一个 ['vender'] 呢