Webpack多配置数组导出时生成空CSS文件问题求助

问题根源分析 #

你的问题出在两个核心点：

1. CleanWebpackPlugin 执行逻辑冲突：第一个配置configLib中的CleanWebpackPlugin会在打包启动时清空dist目录，第二个配置configProject的打包动作在后执行，会导致部分文件被覆盖或丢失；
2. configProject 缺失CSS提取插件：第二个配置没有添加MiniCssExtractPlugin，导致入口文件中引用的CSS无法被提取为单独文件，自然不会生成目标CSS；

修复后的完整配置代码 #

const path = require("path");
const libraryName = "myui";
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 基础配置抽离
const baseConfig = {
    module: {
        rules: [
            {
                test: /\.html$/i,
                exclude: /node_modules/,
                use: ["html-loader"]
            },
            {
                test: /\.hbs$/i,
                use: ["handlebars-loader"]
            },
            {
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: { url: false }
                    },
                ]
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: { url: false }
                    },
                    "sass-loader"
                ]
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: "asset/resource",
                generator: { filename: "images/[hash][ext][query]" }
            },
            {
                test: /favicon.ico$/i,
                type: "asset/resource",
                generator: { filename: "favicon.ico" }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: "asset/resource",
                generator: { filename: "fonts/[hash][ext][query]" }
            }
        ]
    }
};

// 库打包配置
const configLib = {
    ...baseConfig,
    name: "myUiLibrary",
    entry: {
        "my-ui-library": "./my-ui-library/js/main.js",
        errorPages: "./my-ui-library/js/errorPages.js"
    },
    output: {
        path: path.resolve(__dirname, "./wwwroot/dist"),
        filename: "js/[name].js",
        library: libraryName,
        libraryTarget: "var",
        umdNamedDefine: true,
        assetModuleFilename: "assets/[hash][ext][query]",
        // 用Webpack5内置clean替代插件，仅首次打包清空目录
        clean: true
    },
    plugins: [
        new MiniCssExtractPlugin({ filename: "css/[name].css" })
    ]
};

// 项目打包配置
const configProject = {
    ...baseConfig,
    name: "webAppTemplate",
    entry: {
        projectGlobal: "./src/js/projectGlobalEntry.js",
        home: "./src/js/pages/home.js",
        componentLibrary: "./src/js/pages/componentLibrary.js",
    },
    output: {
        path: path.resolve(__dirname, "./wwwroot/dist"),
        filename: "js/[name].js",
        assetModuleFilename: "assets/[hash][ext][query]",
        // 禁止清空，避免覆盖已生成的库文件
        clean: false
    },
    plugins: [
        // 必须添加该插件才能提取当前配置的CSS
        new MiniCssExtractPlugin({ filename: "css/[name].css" })
    ]
};

module.exports = [configLib, configProject];

关键修复说明 #

• 替换CleanWebpackPlugin为Webpack5内置output.clean：
  • 在configLib中设置clean: true，仅在第一个配置打包时清空dist；
  • configProject设置clean: false，保留已生成的库文件；
• 给configProject添加MiniCssExtractPlugin：确保该配置下的入口CSS能被提取为独立文件；
• 用ES6扩展运算符...替代Object.assign，让配置拷贝逻辑更清晰，避免浅拷贝潜在问题。

最终生成的文件结构 #

修复后执行打包，会生成你期望的目录结构：

dist
   css
     errorPages.css
     projectGlobal.css
     my-ui-library.css
     home.css
     componentLibrary.css
   js
     errorPages.js
     my-ui-library.js
     projectGlobal.js
     home.js
     componentLibrary.js
   ...（其他资源文件）

内容的提问来源于stack exchange，提问作者Lee Harrington