Webpack-如何将非模块脚本加载到全局范围|窗口

因此，我有一些需要从窗口范围内运行的供应商文件（这是一组窗口范围内的函数），另外还有一些polyfill，我也希望将它们捆绑到供应商捆绑包中

所以我试过这样的方法：

new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'js/vendor.min.js',
    minChunks: Infinity,
})

entry: {
    'vendor' : ['./vendor.js', './vendor2.js', './polyfills.js']
}

现在，当我运行我的webpack构建时，它确实生成了我的供应商包，但它都被包装在webpackJsonP包装中，因此这些函数在窗口范围内是不可访问的

我也考虑过使用ProvidePlugin之类的东西，但我根本无法做到这一点，因为我没有像jQuery这样的定义名称，所有东西都映射在它下面

---

这在webpack中可能吗？

使用脚本加载程序插件：

module.exports = {
  module: {
    rules: [
      {
        test: /eluminate\.js$/,
        use: [ 'script-loader' ]
      }
    ]
  }
}

如果希望整个脚本在全局命名空间中注册，则必须使用。不建议这样做，因为这样会破坏模块的意义；-） 但如果没有其他办法：

npm install --save-dev script-loader

这个加载器在全局上下文中计算代码，就像您所做的那样 将代码添加到脚本标记中。在此模式下，每个普通库 应该有用。需求、模块等未定义

注意：文件将作为字符串添加到捆绑包中。它不是最小化的 通过网页包，所以使用最小化版本。也没有开发工具 支持此加载程序添加的库

然后在entry.js文件中，您可以将其内联导入：

import  "script-loader!./eluminate.js"

或通过配置：

module.exports = {
  module: {
    rules: [
      {
        test: /eluminate\.js$/,
        use: [ 'script-loader' ]
      }
    ]
  }
}

并在您的条目中.js

import './eluminate.js';

正如我所说，它污染了全局名称空间：

不应再使用。您可以改为使用：

以及：

我正在使用

之前
原始加载程序
，因为我在文档中：

添加
将禁用配置中指定的所有加载程序

当站点由于使用而强制执行某些内容安全策略（CSP）规则时，上述两种解决方案都会出现问题，这绝对是一件好事。（始终将安全视为web中的头等公民；）

到目前为止，我发现的替代解决方案是，假设您也在使用遗留代码库，并且有这种需求

 >代码> UMD < /COD>模块，考虑一个例子
 test: require.resolve('jquery'),
 use: {
      loader: 'imports-loader',
      options: {
        wrapper: {
          thisArg: 'window',
          args: {
            module: false,
            exports: false,
            define: false,
          },
        },
      },
    },
  },

<> > <代码> CJS < /COD>模块导出到全局命名空间，考虑.< /P>
另外，如果您有时间，请阅读。
例如，您能说出一家供应商吗？例如，我们使用IBM Coremetrics进行分析。如果此库/文件是公共的，您有链接吗？你怎么说它没有像jQuery这样的名字？如果您以常规方式在浏览器中加载某个供应商脚本，它如何在windows上全局注册？。。。在
窗口
上有一个链接：这是一个示例，我还有一些这样的库。我的意思是'；与jquery不同的是它'；s没有名称空间，也没有像$那样封装在一个函数中。所有函数都位于一个全局作用域上，该全局作用域暴露于窗口作用域。希望这是有意义的，哦，你可能需要通过一个美化程序运行该文件。而且它不会像：window.funcionName那样暴露自己，不幸的是，否则它会很容易。很酷，谢谢你的回答，我将尝试这个，并很快报告！我不知道你是如何做到这一点的，但我一直得到：[脚本加载器]ReferenceError:CM_DDX没有定义。我现在在窗口范围中看到了大多数属性，所以这是一个步骤，但它一直落在那个错误上。我在你的截图上看到了。我在我的输入文件中添加了这个：导入“脚本加载程序”。/coremetrics/eluminate；我不得不从我的babel任务中排除那个特定的包，否则它就完全失败了。我使用了这种方法，但不幸的是脚本加载器使用了eval，而且我们已经将CSP配置为阻止eval，这使得这很难实现。@AntonyO'Neill自由地创建了一个符合CSP的
脚本加载器
插件；-）哈哈！我不确定这是否可能。。。我现在正在尝试一种不同的方法，在导入中使用一个查询参数将JS作为文件加载，并将其加载到HTML中的脚本标记中。
 test: require.resolve('jquery'),
 use: {
      loader: 'imports-loader',
      options: {
        wrapper: {
          thisArg: 'window',
          args: {
            module: false,
            exports: false,
            define: false,
          },
        },
      },
    },
  },