recently, in the process of learning webpack4, I encountered a problem, that is, it is said on the official website of optimization.splitChunks, that it is used for subcontracting. Pack the repeatedly introduced modules into a js to prevent repeated packaging. I can understand this, but I do not quite understand the specific configuration. Ask God for advice, the following is the code:
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
},
vendor: {
chunks: "all",
test: /[\\/]node_modules[\\/]/,
name: "vendor",
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 100
}
}
}
} this is my own configuration, and then I did not pack out 2 js, as I thought. I would like to ask, what are the meanings of commons and vendor, under what circumstances are they used, and what is the meaning of each configuration? I wrote this, why only a js (vendor), commons is packaged? if name is not set, then what is the file name generated? and, I found that the packaged vendor.js is very large, is it normal?
I would like to ask the Great God for his advice, thank you very much!