Dedicated library JS scope by Webpack for a Drupal behaviour

When we create a Drupal theme with different JS libraries which often break core libraries we need separate the theme scope from others. It is one of existed solutions. We separate and wrap js libraries in the scopes with Webpack modules. Out of scope variables are handled by a Webpack plugin.

plugins: [
    new webpack.ProvidePlugin({
      Velocity: "velocity-animate",
      $: "jquery",
      jQuery: "jquery"
    }),
  ],

Attaches libraries in the entry point (entry.js) to the global scope to reuse libraries out of the webpack scope.

window.sht = {
  jquery: require('jquery'),
  materialize: require('materialize-css')
};

Uses libraries in Drupal JS behaviours.

(function(_$) {
  Drupal.behaviors.shtInitial = {
    attach: function (context, settings) {
      _$('.carousel').carousel();
      console.log(_$);
    }
  };
})(sht.jquery);

It works because of the mechanism of looking out of scope variables. It looks up of scope by scope until it finds the variable. The top scope is window. Webpack packs modules into the module scopes. Upper it defines pseudo global variables. Afterwards some rules exists:

• All out of scope(global) variables have to be overlapped in webpack by the plugin.
• Webpack modules do not have to use dependencies by global variable using window directly.

P.S.
I have used this approach to make a materializecss based theme. The last version of library is a stand alone library. It does not depend on jQuery anymore. So I do not need this work around solution here.