Estoy usando webpack para empaquetar una extensión de Google Chrome, quiero mantener la estructura de carpetas en la carpeta dist. por ejemplo, quiero empaquetar todos los recursos emergentes en dist/popup/* , esta es mi configuración en este momento:

 const path = require('path'); const webpack = require( 'webpack' ); const MiniCssExtractPlugin = require( 'mini-css-extract-plugin'); const HtmlWebpackPlugin = require( 'html-webpack-plugin'); const CopyPlugin = require("copy-webpack-plugin"); module.exports = { entry : { popup : './src/popup/' } , resolve: { alias: { // https://stackoverflow.com/questions/50805384/module-not-found-error-cant-resolve-vue-path-not-correct vue: 'vue/dist/vue.esm-bundler.js' }, }, output : { path : path.resolve(__dirname, '../../bundle') , filename : '[path]/[name].js' }, module : { rules : [ { test : /\.js$/ , exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)\1)/ ] , loader : 'babel-loader' } , { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], }, { test : /\.(scss)$/ , use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] } ] }, plugins : [ new CopyPlugin({ patterns: [ { from: "src/manifest.json", to: "manifest.json" }, { from: "src/resource/image", to: "resource/image" }, ], }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css", }), new HtmlWebpackPlugin({ filename: 'popup.html', template: 'src/popup/index.html' }), new webpack.DefinePlugin({ __VUE_OPTIONS_API__: false, __VUE_PROD_DEVTOOLS__: false, }), ] };

He intentado modificar el nombre del archivo de salida de esta manera:

 filename : '[path]/[name].js'

parece que no funcionó. Estoy buscando en google y no encontré ninguna sugerencia. ¿Es posible hacer así? o una entrada diferente con una carpeta dist diferente.