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

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

a、 js:

b、 js:

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

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)

---

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

您可以通过将

库目标设置为
变量来完成。这仍将发出webpack包装器代码，但它将评估您的入口点，并根据
库的值将入口点的导出分配给变量

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

我最后用了大口喝，这很简单。下面是我的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
中，而不将脚本更改为模块。
这似乎没有任何区别，我构建了两个bundle，一个带有
libraryTarget
，一个没有，并且输出是相同的（通过diff确认），可能我误解了，是否要完成删除所有网页包包装代码？我不认为这在webpack中是可能的，但您可能希望研究使用TypeScript进行编译（JavaScript是有效的TypeScript，因此使用正确的设置您不需要更改任何代码）。请看。我稍微更改了我的答案，以便将模块的结果分配给一个变量。这可能不是您想要的，但它很可能会让您的模块像一个全局脚本一样工作。然后，您可以从其他脚本访问该变量，该变量包含您的entrypoint文件的所有导出。您可以只在“b.js”中导入“a.js”吗？不清楚您想要什么，但这是怎么回事：
module.exports = {
  entry: './entry.js',
  mode: 'production',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'var',
    library: 'YourLibraryNameHere'
  }
};

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;