是否可以让不同的入口包到webpack 5中的不同输出路径

Question

我正在使用webpack来打包一个googlechrome扩展，我想将文件夹结构保留在dist文件夹中。例如，我想将所有弹出资源打包到dist/popup/*中，这是我现在的配置：

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,
}),
]
};

我试着调整输出文件名如下：

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

似乎不起作用。我正在谷歌上搜索，没有找到任何建议。有可能这样做吗？或者具有不同dist文件夹的不同条目。

Answer 1

我定义的条目如下：

entry : {
'popup/popup' : './src/popup/' 
} ,

这将在dist.中生成一个弹出文件夹