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文档

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

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

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

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

或通过配置:

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

在你的entry.js

import './eluminate.js';

正如我所说,它污染了全局命名空间:

Answer 2

不应再使用脚本加载器。您可以使用raw-loader代替：

npm install --save-dev raw-loader

和：

import('!!raw-loader!./nonModuleScript.js').then(rawModule => eval.call(null, rawModule.default));

我!!之前使用过，raw-loader因为我处于文档中描述的情况：

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