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

Question

我正在使用webpack打包一个google chrome扩展，我想保留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: {
        // 
        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))/ ] ,
        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'

好像没用。我正在从 google 搜索，但没有找到任何建议。可以这样做吗？或具有不同 dist 文件夹的不同条目。

Answer 1

我是这样定义条目的：

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

这会在 dist 中生成一个弹出文件夹。

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

is it possible to let different entry package to different output path in webpack 5

javascript

webpack