使用 Webpack 和 Gulp 如何有选择地组合一些文件而不是其他文件？

【问题标题】：Using Webpack and Gulp how can I selectively combine some files and not others?使用 Webpack 和 Gulp 如何有选择地组合一些文件而不是其他文件？
【发布时间】：2022-09-30 22:14:48
【问题描述】：

所以我有一个情况... 我正在使用 Gulp（没有选择必须坚持使用它），并且我需要使用 Webpack 组合一些 JS 文件，如下面的示例中所述，并将它们移动到特定位置。

\'fileA.js\' > \'dest/js/fileA.js\');
[\'fileB.js\', \'fileC.js\'] > \'dest/js/combinedBC.js\');
[\'fileD.js\', \'fileE.js\', \'fileF.js\', \'fileG.js\'] > \'dest/js/combinedDEFG.js\');
\'fileH.js\' > \'dest/js/fileH.js\');

从示例中可以看出，我需要保留单个文件的名称，但为组合文件指定一个名称。

有没有人知道如何在不重复编写 gulp 任务的情况下做到这一点？或者即使有更好的方法来做到这一点......

TL:DR 有很长的 JS 文件列表，需要合并一些而不是其他的

为什么不 gulp-copy 用于单个文件和 webpack 多配置导出，其中每个配置使用多主 entry？
老实说，我不确定该怎么做...

标签： javascript node.js webpack gulp

【解决方案1】：

这是实现所概述的要求的基本方法（您可能需要做更多的事情，例如转译等，但没有说明）：

gulpfile.js

您可能甚至不需要gulp-copy，只需使用gulp.dest。

const { src, dest } = require('gulp')

function copy() {
  return src('file{A|H}.js')
    .pipe(dest('dest/js'))
}

exports.copy = copy

webpack.config.js

这使用了一个“多主入口”对于entry 和exporting multiple configurations。

module.exports = [
  {
    name: 'combinedBC',
    entry: ['fileB.js', 'fileC.js'],
    output: {
      filename: './dest/js/combinedBC.js'
    }
  },
  {
    name: 'combinedDEFG',
    entry: ['fileD.js', 'fileE.js', 'fileF.js', 'fileG.js'],
    output: {
      filename: './dest/js/combinedDEFG.js'
    }
  }
]

包.json

{
  "scripts": {
    "build": "gulp copy && webpack"
  }
}

【讨论】：