如何用Webpack结合Gulp选择性合并JS文件并避免重复任务

核心思路 #

将单个文件输出、多文件合并的规则集中配置成一个数组，通过遍历数组批量生成处理逻辑，无需重复编写Gulp任务，实现配置化管理。

步骤1：安装依赖 #

先安装所需npm包：

npm install gulp webpack gulp-webpack --save-dev
# 若需ES6+语法转译，额外安装babel相关依赖
npm install babel-loader @babel/core @babel/preset-env --save-dev

步骤2：编写Gulp配置文件 #

在项目根目录创建gulpfile.js，代码如下：

const gulp = require('gulp');
const webpack = require('webpack');
const gulpWebpack = require('gulp-webpack');

// 定义所有输出/合并规则：entries为源文件路径，output为目标文件名
const mergeConfigs = [
  { entries: 'src/js/fileA.js', output: 'fileA.js' },
  { entries: ['src/js/fileB.js', 'src/js/fileC.js'], output: 'combinedBC.js' },
  { entries: ['src/js/fileD.js', 'src/js/fileE.js', 'src/js/fileF.js', 'src/js/fileG.js'], output: 'combinedDEFG.js' },
  { entries: 'src/js/fileH.js', output: 'fileH.js' }
];

// 统一处理JS文件的任务
function processJs(done) {
  // 遍历配置数组，生成每个规则对应的处理流
  const taskPromises = mergeConfigs.map(config => {
    return new Promise((resolve) => {
      gulp.src(config.entries)
        .pipe(gulpWebpack({
          mode: 'production', // 开发环境改为'development'，保留源码格式并生成source map
          output: {
            filename: config.output
          },
          // 可选：添加babel转译配置，适配ES6+语法
          module: {
            rules: [
              {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }
            ]
          }
        }, webpack))
        .pipe(gulp.dest('dest/js'))
        .on('end', resolve);
    });
  });

  // 等待所有处理任务完成
  Promise.all(taskPromises).then(() => done());
}

// 注册默认任务，执行gulp命令即可触发
exports.default = processJs;
// 可额外注册开发监听任务：
// exports.dev = function() {
//   gulp.watch('src/js/**/*.js', processJs);
// };

方案优势 #

• 配置化管理：所有输出规则集中在mergeConfigs数组，新增/修改规则只需调整数组，无需修改任务逻辑
• 统一处理逻辑：单个文件输出与多文件合并共用一套代码，无冗余
• webpack能力复用：借助webpack的打包能力，可轻松扩展代码压缩、ES6转译、source map生成等功能
• 高效执行：所有处理任务并行执行，提升构建速度

注意事项 #

• 确保mergeConfigs中的源文件路径与实际项目文件结构一致
• 根据环境调整mode参数：生产环境用production自动压缩代码，开发环境用development便于调试
• 若无需ES6转译，可删除module.rules部分的babel配置

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