二十三（3）SplitChunksPlugin的vendors中filename配置报错 ------ 2019-07-14

当我在一个文件中异步引入了一个第三方库，使用如下代码和配置就会打包失败：

入口文件中的代码：
async function getComponent() {
    const {
        default: _
    } =
    await import(/* webpackChunkName:"loadsh" */'lodash');
    const element = document.createElement('div');
    element.innerHTML = _.join(['Dell', 'Lee'], '-');
    return element;
}
document.addEventListener('click', () => {
    getComponent().then(element => {
        document.body.appendChild(element);
    })
})

SplitChunksPlugin的配置
optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 30000,
            maxSize: 0,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    filename: 'vendors.js'
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,
                    filename: 'common.js'
                }
            }
        }
    }

打包时的报错信息
Error: SplitChunksPlugin: You are trying to set a filename for a chunk which is (also) loaded on demand.
The runtime can only handle loading of chunks which match the chunkFilename schema. Using a custom filename would fail at runtime. (cache group: vendors)
大概分析了一下，是cacheGroups中的vendors中的filename配置的有问题，具体是什么原因没有仔细研究，就知道不能直接去定义文件的名字和类型；
解决办法：将filenam改成 name:'vendors'

二十三（3）SplitChunksPlugin的vendors中filename配置报错 ------ 2019-07-14

推荐阅读更多精彩内容