如何使用 webpack 正确捆绑 umd 依赖项答案

【问题标题】：How to use webpack to properly bundle a umd dependency如何使用 webpack 正确捆绑 umd 依赖项
【发布时间】：2020-11-01 02:18:27
【问题描述】：

我正在使用 webpack 捆绑旧版 es5 webapp，我需要导入一些 umd 格式的依赖项，例如

import 'moment/min/moment-with-locales.min.js'

我希望 webpack 简单地将其捆绑到最终的应用程序包中，而不进行任何更改。但是，似乎 webpack 在构建期间将 umd 模块转换为如下所示的内容

(function(module) {
    !function(a, b) {
        true ? module.exports = b() : undefined
    }

请注意上面的事实，这显然会使捆绑包无法加载到浏览器中，因为它将浏览器视为 CommonJS env。是否有任何设置/配置可以用来防止这种情况发生，而不是使用 https://webpack.js.org/loaders/expose-loader/ 作为解决方法？

【问题讨论】：

【解决方案1】：

script-loader 解决了我的问题。基本上，由于正在进行遗留代码库迁移，我希望将一些第 3 方库加载为全局变量（例如 window.$f 或 jQuery）。

^{注意：webpack 模块还有一个noparse 选项可以防止上述转换，但它并不能解决我的问题，因为上面的代码实际上是由 webpack 加载的，因此仍然被视为 cjs 模块} .

【讨论】：