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

Question

所以我有一些供应商文件，我需要从窗口范围运行（它是一堆窗口范围的功能）加上我有一些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中甚至可能吗？

谢谢

Answer 1

使用script-loader插件：

如果您希望整个脚本在全局命名空间中注册，则必须使用script-loader。这不建议，因为它打破了模块的意义;-)但如果没有其他方式：

npm install --save-dev script-loader

Webpack docs

此加载器评估全局上下文中的代码，就像您将代码添加到脚本标记中一样。在这种模式下，每个普通的库都应该有效要求，模块等未定义。

注意：该文件作为字符串添加到包中。它没有通过webpack最小化，因此请使用最小化版本。此加载程序添加的库也没有开发工具支持。

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

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

或通过配置：

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

在你的entry.js

import './eluminate.js';

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