Файлы, которые будут объединены.
Исходный конфиг 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 не связан с моментом и 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 связан независимо,не с того момента и без дела?