将要捆绑的文件。
原始的webpack4配置splitChunks与官方文档相同。
module.exports = {
mode: 'development',
entry: { zzz: './src/index.js' },
output: {
path: path.resolve('./dist'),
filename: '[name].bundle5.js',
chunkFilename: '[name].chunk3.js'
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}]
},
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
}
运行webpack4后,结果如下。 jQuery并未与moment和lodash捆绑在一起。
但是当我刚刚为cacheGroups添加名称时。
module.exports = {
mode: 'development',
entry: { zzz: './src/index.js' },
output: {
path: path.resolve('./dist'),
filename: '[name].bundle5.js',
chunkFilename: '[name].chunk3.js'
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}]
},
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
name: 'sisi',
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
name: 'tata',
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
}
再次运行webpack4,结果如下。 jQuery捆绑了力矩和lodash。
让我最困惑的是,作为官方配置,为什么jquery是独立捆绑的,而不是带有矩和lodash的?