Confusion over the various approaches to selecting web packages

Question

I got a little confused in the different ways that webpack allows you to set a variable that is not available in npm or be bundled. I managed to show google script global googlevar visualization diagram with

resolve: {
    extensions: ['.js', '.json'],
    alias: {
      'google': path.resolve(__dirname, 'vendor', 'google.js')
    }
  }

in combination with

  plugins: [
    new webpack.ProvidePlugin({
      'google': 'google'
    })
  ]

however, looking at webpack docs there are a few more laying methods that look like they can do something. There is imports-loaderalso exports-loadera script-loader. I know that I am associated with documents, but I still find descriptions of them when these four should be used a little obscurely.

, , require ? ? , ?

require("imports?$=jquery!./file.js")

- , ?

Answer 1

imports exports . , .

, paho-mqtt, <script src=""> :

import Paho from 'imports-loader?this=>window!exports-loader?Paho!paho-mqtt';

//and this is transformed by webpack to something like:
(function(window){

    //wow you can use `window here`, `this` in the global context === window.


   // original module code here
   // that exposes global var `Paho`


   module.exports = Paho;

})(this);

Answer 2

scripts-loader

, , . , , - script - /, .

imports-loader exports-loader

, , tinymce, this window, script. CommonJS ES.

, , import-loader, window script. webpack.config.js

{ test: require.resolve('tinymce/tinymce'), use: ['imports?this=>window', 'exports?tinymce'] }

insert window this, exports-loader , tinymce tinymce, .

, .

ProvidePlugin

, , , - . , jQuery, $, window.$, jQuery window.jQuery

  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.$': 'jquery',
    'window.jQuery': 'jquery',
  }),

, , webpack , jQuery.

imports-loader, , , , script. , webpack , imports-loader .

, , , , , , , https://webpack.js.org/guides/shimming/