I am using webpack "webpack": "^5.67.0" splitChunks to package the google chrome extension js and cs file, this is my configuration right now.
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'commons1',
test: /.(scss)$/,
chunks: 'all',
enforce: true
},
commons1: {
name: 'commons1',
chunks: 'all',
minChunks: 1,
test(module,chunks){
for (const chunk of module.chunksIterable) {
if (chunk.name && /(popup|content)/.test(chunk.name)) {
return true;
}
}
return false;
}
},
commons2: {
name: 'commons2',
chunks: 'all',
minChunks: 1,
test(module,chunks){
for (const chunk of module.chunksIterable) {
if (chunk.name && /(options|commons1)/.test(chunk.name)) {
return true;
}
}
return false;
}
},
commons3: {
name: 'commons3',
chunks: 'all',
minChunks: 1,
test(module,chunks){
for (const chunk of module.chunksIterable) {
if (chunk.name && /(bg|commons2)/.test(chunk.name)) {
return true;
}
}
return false;
}
},
}
}
},
I want to generate different type of file in different dist subfolder, for example, I want the popup.js and popup.css file should be /dist/popup/popup.js and /dist/popup/popup.css. What should I tweak my config to make it work like that? I am search the splitChunks docs but did not found any suggestions. Is it possible to do like that? the output folder structure I want may look like this:
-- dist
---- popup
------ popup.js
------ popup.css
---- bg
---- options
this is the current file structure and look like chaos:
