如何将 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)

This plugin 完成了我想要实现的目标，但是有一个错误，我无法缩小组合文件，除此之外，我还想运行 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 中，而无需将脚本更改为模块。

Answer 2

您可以通过将libraryTarget 设置为var 来做到这一点。这仍然会发出 webpack 包装器代码，但它会评估您的入口点并根据 library 的值将入口点的导出分配给一个变量。

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