webpack-html-plugin不自动引用splitChunks提取的公共代码？

Question

首先贴上项目结构，

webpack.base.config.js部分代码

// 配置常量
const SRC_PATH = path.resolve(__dirname, '../src');
const OUTPUT_PATH = path.resolve(__dirname, '../dist');
const PUBLIC_PATH = '/dist/';

// 获取html-webpack-plugin参数的方法
const getHtmlConfig = function(name){

return {
    template    : './views/' + name + '.html',
    filename    : name + '.html',
    title       : name,
    inject      : true,
    hash        : true,
    chunks      : [name,'common']
};

};

const config = {

context: SRC_PATH,
entry: {
    common : ['./pages/common/index.js'],
    index: ['./pages/index/index.js'],
    about: ['./pages/about/index.js'],
    user: ['./pages/user/index.js']
},
output: {
    path: OUTPUT_PATH,
    filename: 'js/[name].[chunkhash:6].js',
    publicPath: PUBLIC_PATH
},
resolve : {
  alias : {
      $src : path.resolve(__dirname,'../src')
  }
},
plugins: [
    new htmlWebpackPlugin(getHtmlConfig('index')),
    new htmlWebpackPlugin(getHtmlConfig('about')),
    new htmlWebpackPlugin(getHtmlConfig('user'))
]

}

webpack.prod.config.js 部分代码如下

const config = merge(baseConfig,{

mode : 'production',
optimization : {
    splitChunks : {
        cacheGroups : {
            commons : {
                name : 'vendor',
                minChunks : 2,
                chunks : 'all'
            }
        }
    }
}

})

在入口文件index、about和user中都引入了lodash，最后打包出来如图

此时由于splitChunks将公共模块提取出来为vendor，但是打开最后打包生成的三个html文件(index,about,user)发现只引入了当时配的 chunks : [name,'common'] ，而vendor并没有自动引入，我觉得这里不应该把vendor写入到webpackHtmlPlugin的chunks项里面吧，因为假设我index引入了一个模块，我的user也引入了一个模块，但是我可能忘了或者并不清楚两个模块是相同的，但是splitChunks提取出来了，我也不可能所有的webpackHtmlPlugin的chunks项都引入，那就没意义了呀，请问被splitChunks提取的公共模块有没有办法自动引入呢？谢谢

Answer 1

cacheGroups 中的每一个缓存块，其实都是一个chunk，你要在html中自动引入，就在htmlWebpackPlugin中把cacheGroups对应的键值加入到chunk数组里。在下面的chunk数组里添加‘commons’就可以了。注意后面那个s

return {
    template    : './views/' + name + '.html',
    filename    : name + '.html',
    title       : name,
    inject      : true,
    hash        : true,
    chunks      : [name,'common','commons']
};