is it possible to custom the splitChunks output file folder when using webpack 5 to package

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:

I have tried to add path like this:

commons1: {
          name: 'commons1',
          chunks: 'all',
          minChunks: 1,
          path: 'popup',
          test(module,chunks){
            for (const chunk of module.chunksIterable) {
              if (chunk.name && /(popup|content)/.test(chunk.name)) {
                   return true;
              }
            }
            return false;
          }
        },

but failed, when compile, shows error like this:

> webpack --mode development --config build/webpack.dev.config.js

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.optimization.splitChunks.cacheGroups['commons1'] has an unknown property 'path'. These properties are valid:
   object { automaticNameDelimiter?, chunks?, enforce?, enforceSizeThreshold?, filename?, idHint?, layer?, maxAsyncRequests?, maxAsyncSize?, maxInitialRequests?, maxInitialSize?, maxSize?, minChunks?, minRemainingSize?, minSize?, minSizeReduction?, name?, priority?, reuseExistingChunk?, test?, type?, usedExports? }
   -> Options object for describing behavior of a cache group selecting modules that should be cached together.