Webpack - How to load non module scripts into global scope | window

Question

so i have a few vendor files that i need to run from window scoped (it\'s a bunch of window scoped functions) plus i have some polyfills that i would like to bundle into the

Answer 1

script-loader should-not be used anymore. You can use raw-loader instead:

npm install --save-dev raw-loader

And:

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

I'm using !! before raw-loader because I'm in the case described in the documentation:

Adding !! to a request will disable all loaders specified in the configuration

Answer 2

Use the script-loader plugin:

If you want the whole script to register in the global namespace you have to use script-loader. This is not recommend, as it breaks the sense of modules ;-) But if there is no other way:

npm install --save-dev script-loader

Webpack docs

This loader evaluates code in the global context, just like you would add the code into a script tag. In this mode every normal library should work. require, module, etc. are undefined.

Note: The file is added as string to the bundle. It is not minimized by webpack, so use a minimized version. There is also no dev tool support for libraries added by this loader.

Then in your entry.js file you could import it inline:

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

or via config:

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

and in your entry.js

import './eluminate.js';

As I said, it pollutes the global namespace: