如何通过Webpack压缩并处理含全局变量的静态.js依赖库？

我刚好处理过类似的遗留旧库整合需求，完全能解决你提到的所有痛点——让全局变量库在全局作用域运行、支持调试、压缩并生成sourcemap，最终输出到vendor目录。下面是两个经过验证的可行方案：

方案一：多入口独立输出（保留三个文件结构） #

如果需要保持原三个文件的独立结构（比如它们有严格的加载顺序要求），可以用Webpack的多入口配置，配合压缩插件和sourcemap生成：

// webpack.config.js
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  // 配置三个入口文件，对应原库的三个独立文件
  entry: {
    libFile1: './path/to/your-old-lib/file1.js',
    libFile2: './path/to/your-old-lib/file2.js',
    libFile3: './path/to/your-old-lib/file3.js'
  },
  output: {
    // 输出到项目根目录下的vendor文件夹
    path: path.resolve(__dirname, 'vendor'),
    // 输出文件名格式：[入口名].min.js
    filename: '[name].min.js',
    // 关键：禁用Webpack的模块化封装，让代码直接在全局作用域执行
    libraryTarget: 'global',
    // 指定全局对象为window（浏览器环境）
    globalObject: 'window'
  },
  // 生成sourcemap用于调试，对应压缩后的文件
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new TerserPlugin({
        // 启用压缩，针对大文件开启并行提升速度
        parallel: true,
        // 生成对应的sourcemap文件
        sourceMap: true,
        terserOptions: {
          // 保留全局变量名（如果需要调试时识别原变量）
          keep_classnames: true,
          keep_fnames: true
        }
      })
    ]
  }
};

关键说明： #

• libraryTarget: 'global' 确保Webpack不会把代码包裹在模块化函数里，让原库的var声明直接挂载到全局作用域
• devtool: 'source-map' 会在vendor目录生成对应的.map文件，浏览器调试时能直接查看原始未压缩代码
• TerserPlugin的parallel选项针对15万行的大文件能大幅提升压缩速度

方案二：合并为单个文件输出 #

如果不需要保留原文件结构，把三个文件合并成一个压缩后的文件会更便于管理：

// webpack.config.js
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  // 将三个文件按顺序放入数组，Webpack会按顺序合并
  entry: ['./path/to/your-old-lib/file1.js', './path/to/your-old-lib/file2.js', './path/to/your-old-lib/file3.js'],
  output: {
    path: path.resolve(__dirname, 'vendor'),
    filename: 'old-lib.min.js',
    libraryTarget: 'global',
    globalObject: 'window'
  },
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        sourceMap: true,
        terserOptions: {
          keep_classnames: true,
          keep_fnames: true
        }
      })
    ]
  }
};

关于script-loader的适用性 #

其实script-loader完全适用你的场景！它的作用就是把加载的文件当作全局脚本执行，不会进行模块化封装。你可以在入口中直接使用：

entry: {
  libFile1: 'script-loader!./path/to/your-old-lib/file1.js',
  // 其他文件同理
}

这种方式下，Webpack会自动处理脚本的全局执行，不需要额外配置libraryTarget，调试和压缩配置和上面的方案一致。

调试注意事项 #

• 确保浏览器开发者工具的Sources面板中，开启了Enable JavaScript source maps选项
• 压缩后的.min.js文件会自动关联对应的.map文件，你可以在Sources里找到原始的未压缩代码进行断点调试

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