使用webextension-toolbox.config.js时排除libs目录参与代码压缩

我尝试了多种方法让libs目录不参与代码压缩，但通过插件无法实现该需求。

构建过程输出截图

原配置代码 #

// 该文件不经过babel转译，所以用原生JS编写
// 也可以使用你的Node.js版本支持的ES2015特性
const { resolve } = require('path')
const GlobEntriesPlugin = require('webpack-watched-glob-entries-plugin')

// const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    webpack: (config, { dev, vendor, copyIgnore }) => {
        // 自定义webpack配置
        console.log("Config: ", JSON.stringify(config.module.rules));
        // console.log("Config: ", config.module.rules[1].toString());

        // config.module.noParse = /notCompileScripts\/some-dir/
        // config.module.noParse = /libs/
        config.module.rules.push({
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
        });
        config.entry = GlobEntriesPlugin.getEntries(
            [
                // resolve('app', '*.js'),
                resolve('app', '?(scripts)/**/*.js'),
                resolve('app', '?(styles/**/*.css)'),
                // resolve('app', '?(libs)/*.js')
            ],
            // {
            //     ignore: 'libs/*.js'
            // }
        )

        // console.log("copyIgnore: ", copyIgnore);
        // console.log("dev: ", dev);
        // console.log("vendor: ", vendor);

        // config.plugins.push(
        //     new CopyPlugin({
        //         patterns: [
        //             { from: "libs", to: "libs", info: { minimized: false } }
        //         ]
        //     })
        // );

        // 重要：返回修改后的配置
        // console.log("Config: ", JSON.stringify(config));
        return config
    },
    copyIgnore: ['scripts/*.js', 'scripts/**/*.js', '**/*.json']
}

修正后的可行配置 #

要实现libs目录不参与压缩，需从排除打包流程和直接复制文件两方面调整：

1. 确保libs目录不被加入webpack入口，避免进入编译压缩流程
2. 使用copy-webpack-plugin直接复制libs目录到输出目录，标记为无需压缩
3. 可选：通过noParse跳过对libs文件的解析，提升构建速度

修改后的完整代码：

const { resolve } = require('path')
const GlobEntriesPlugin = require('webpack-watched-glob-entries-plugin')
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    webpack: (config, { dev, vendor, copyIgnore }) => {
        // 新增：跳过libs目录文件的解析（可选，提升构建速度）
        config.module.noParse = /libs/;

        // 保留原有的css loader配置
        config.module.rules.push({
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
        });

        // 配置入口时，明确忽略libs目录
        config.entry = GlobEntriesPlugin.getEntries(
            [
                resolve('app', '?(scripts)/**/*.js'),
                resolve('app', '?(styles/**/*.css)'),
            ],
            {
                ignore: resolve('app', 'libs/**/*')
            }
        )

        // 新增：复制libs目录到输出目录，标记为无需压缩
        config.plugins.push(
            new CopyPlugin({
                patterns: [
                    { 
                        from: resolve('app', 'libs'), 
                        to: 'libs', 
                        info: { minimized: false } 
                    }
                ]
            })
        );

        return config
    },
    copyIgnore: ['scripts/*.js', 'scripts/**/*.js', '**/*.json', 'libs/**/*']
}

关键配置说明 #

• GlobEntriesPlugin的ignore选项：明确排除libs目录下的所有文件，不让它们进入webpack的打包流程
• CopyPlugin的minimized: false：告诉webpack这些文件无需压缩，跳过压缩步骤
• noParse：让webpack跳过对libs目录文件的语法解析，减少构建时间，适合已编译完成的第三方库

内容的提问来源于stack exchange，提问作者Ganesh Jaiwal