如何将 webpack 包导出为全局脚本（而不是模块）？

Question

我有 2 个文件，a.js 和 b.js：

a.js：

function hello() {
    alert('hey');
    alert('bye');
}

b.js：

const name = 'Bob';
alert(name)

我将它们都导入到我的条目文件中：

import './a';
import './b';

我想将它们组合起来，我的 webpack.config.js 如下所示：

const path = require('path');

module.exports = {
  entry: './entry.js',
  mode: 'production',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

当我运行 webpack 时，我得到一个模块：

// etc...

/***/ (function(module, exports) {

function hello() {
    alert('hey');
    alert('bye');
}

/***/ }),
/* 2 */
/***/ (function(module, exports) {

const name = 'Bob';
alert(name)

/***/ })
/******/ ]);

相反，我怎样才能得到：

function hello() {
    alert('hey');
    alert('bye');
}

const name = 'Bob';
alert(name)

这个插件实现了我想要实现的目标，但有一个错误，我无法缩小组合文件，最重要的是我还想运行 babel 将代码转换为 es5 兼容。所有这些事情似乎都更容易以常规的 webpack 方式完成，因此如果我能让 webpack 导出普通脚本而不是模块，那就太好了。

Answer 1

我最终使用了 gulp，这非常简单。这是我的 gulpfile.js 的样子：

const gulp = require('gulp');
const { watch } = require('gulp');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');

const defaultTask = (cb) => {
  return gulp
    .src([
      'src/file1.js',
      'src/file2.js',
      'src/file3.js',
      // etc...
    ])
    .pipe(concat('bundle.min.js'))
    .pipe(
      babel({
        presets: ['@babel/preset-env']
      })
    )
    .pipe(terser())
    .pipe(gulp.dest('dist'));
  cb();
};

exports.default = defaultTask;

这会将 es6 连接、缩小并转换为 es5，并按原样保存输出，而dist/bundle.min.js无需将脚本更改为模块。