Webpack打包原生Vanilla JS文件：压缩失效、冗余文件及优化咨询

需求与问题 #

我用Webpack打包原生Vanilla JS文件，需要生成三类目标文件：

• mylib.js
• mylib.min.js（和mylib.js内容一致，但需压缩）
• mylib-test.js（测试脚本）

目前遇到三个问题：

1. mylib.min.js无法被压缩，输出的是未压缩状态；
2. bin目录下额外生成了名为"main"的文件；
3. 想知道有没有更优的实现方案。

当前Webpack配置 #

const path = require("path");
const RawBundlerPlugin = require("webpack-raw-bundler");
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: "development",
    entry: ["./index.js"],
    output: {
        filename: "[name]",
        path: path.resolve(__dirname, "bin")
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                include: /mylib-2.0.0.min\.js$/,
            }),
        ],
    },
    module: {
        rules: [
            { test: /\.txt$/, use: "raw-loader" }
        ]
    },
    plugins: [
        new RawBundlerPlugin({
            readEncoding: "utf-8",
            bundles: [ "mylib-2.0.0.js", "mylib-2.0.0.min.js", "mylib-2.0.0.test.js" ],
            "mylib-2.0.0.js": [
                "src/header.txt",
                "src/foo/Foo.js",
                "src/bar/Bar.js",
                "src/footer.txt"
            ],
            "mylib-2.0.0.min.js": [
                "src/header.txt",
                "src/foo/Foo.js",
                "src/bar/Bar.js",
                "src/footer.txt"
            ],
            "mylib-2.0.0.test.js": [
                "test/header.txt",
                "test/foo/FooTest.js",
                "test/bar/BarTest.js"
            ]
        })
    ],
    watchOptions: {
        ignored: /node_modules/
    }
};

问题解决与优化方案 #

1. 解决mylib.min.js未压缩的问题 #

原因：

• 当前mode设为development，Webpack开发模式会默认弱化压缩逻辑，即使手动配置TerserPlugin也可能不触发；
• RawBundlerPlugin生成的文件可能未被Terser的匹配规则正确捕获，或者插件优先级导致压缩未执行。

修复步骤：

1. 将mode改为production，该模式下Webpack会自动启用压缩优化，也能让TerserPlugin正常工作；
2. 调整TerserPlugin的匹配规则，简化为匹配所有.min.js后缀的文件，同时明确压缩参数：

   optimization: {
       minimize: true,
       minimizer: [
           new TerserPlugin({
               include: /\.min\.js$/,
               terserOptions: {
                   compress: true,
                   mangle: true,
                   format: { comments: false }
               }
           }),
       ],
   }
   

3. 若RawBundlerPlugin仍干扰压缩流程，可考虑替换为Webpack原生多入口配置（见下文优化方案）。

2. 移除额外生成的"main"文件 #

原因：配置中entry: ["./index.js"]是Webpack的默认入口，默认会生成名为main的打包文件，而你需要的文件是通过RawBundlerPlugin生成的，这个入口属于冗余配置。

修复步骤：

• 直接删除entry配置项，因为你需要的文件已通过插件生成；
• 若保留该入口用于其他用途，可改为对象形式指定自定义文件名，避免生成默认的main：

  entry: {
      'custom-entry': './index.js'
  }
  

3. 更优的实现方案 #

推荐使用Webpack原生多入口配置替代RawBundlerPlugin，充分利用Webpack内置能力，减少第三方插件依赖，配置更简洁可控：

const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: "production",
    entry: {
        'mylib-2.0.0.js': [
            './src/header.txt',
            './src/foo/Foo.js',
            './src/bar/Bar.js',
            './src/footer.txt'
        ],
        'mylib-2.0.0.min.js': [
            './src/header.txt',
            './src/foo/Foo.js',
            './src/bar/Bar.js',
            './src/footer.txt'
        ],
        'mylib-2.0.0.test.js': [
            './test/header.txt',
            './test/foo/FooTest.js',
            './test/bar/BarTest.js'
        ]
    },
    output: {
        filename: '[name]',
        path: path.resolve(__dirname, "bin"),
        clean: true // 打包前自动清理bin目录，避免冗余文件
    },
    module: {
        rules: [
            { 
                test: /\.txt$/, 
                use: 'raw-loader' 
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader' // 可选，如需转译ES6+语法到兼容版本
            }
        ]
    },
    optimization: {
        minimizer: [
            new TerserPlugin({
                include: /\.min\.js$/,
                terserOptions: {
                    compress: { drop_console: true } // 可选，移除生产环境console.log
                }
            })
        ]
    },
    watchOptions: {
        ignored: /node_modules/
    }
};

方案优势：

• 基于Webpack原生能力，无第三方插件依赖，减少兼容性问题；
• 更精准控制每个入口的打包逻辑，压缩规则匹配更可靠；
• output.clean自动清理输出目录，保持文件结构整洁；
• 易于扩展，可快速添加Babel转译、代码分割、资源缓存等功能。

如果需要区分开发/生产环境配置，可将配置拆分为webpack.common.js、webpack.dev.js、webpack.prod.js，通过webpack-merge合并，实现不同环境的差异化打包。

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