How to create globally available bundles?

[stratboy]

Hi, I can't fully understand how to bundle external libraries so that they'll be available globally (meaning: visible by any other script loaded after them). So:

<script type="text/javascript" src="my-global-bundle.js"></script>
<script type="text/javascript" src="my-scripts-or-app.js"></script>

Where my-scripts-or-app.js should see libraries contained in my-global-bundle.js.

This need comes from a particular use case:

• full custom wordpress theme, where I load a shared.js (my-global-bundle.js) file which contains several imported libraries and custom code used throughout all the website

• for one specific website page, I built a Vuejs app (because on that page I need complex js interaction), which would need some of the above libraries (a form validator and another couple of libraries). Now, the shared libraries above are undefined when trying to reference them from the app. And I don't want to re-bundle them with the app, since that page will also load my-scripts-or-app.js as well, so they would end up loading twice.
  I just want to be able to freely reference and use my-global-bundle.js scripts and libraries from the app. Once upon a time this was the simple default. Now with modules it's not.

So, how to?

[vankop]

you should output a library.type=global https://webpack.js.org/configuration/output/#outputlibrarytype

[stratboy]

Ok thank you. Say this is my current configuration:

const path = require('path');
const webpack = require("webpack");
const TerserPlugin = require('terser-webpack-plugin');
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

module.exports = {
  mode: 'development',
  //mode: 'production',
  watch: true,
  
  entry: {
    shared: './src/shared.js',
    front_page: './src/front-page.js',
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },

  externals: {
    jquery: 'jQuery',
    hoverIntent: 'hoverIntent'
  },

  module: {
    rules: [
      {
        test: /swiper\.esm\.js|fancybox\.esm\.js|jquery|jquery-hoverintent/,
        sideEffects: false
      }, //tree shaking

      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: ['lodash'],
            presets: ['@babel/preset-env'],
            cacheDirectory: true
          }
        }
      }, // babel
    ] // rules
  }, // module

  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({ extractComments: false })],
    usedExports: true,
    providedExports: true,
    splitChunks: {
      cacheGroups: {
        visuals: {
          name: 'visuals',
          chunks: 'all',
          test: /[\\/]node_modules[\\/](swiper|@fancyapps\/ui|dom7|ssr-window|lazysizes|lr-js-modules\/accordion-menu\.js|lr-js-modules\/validator.js|lr-js-modules\/visualizer.js|lodash)/
        },
      },
    }
  },

  plugins: [
    new LodashModuleReplacementPlugin(),
    //new BundleAnalyzerPlugin(),

    new MergeIntoSingleFilePlugin({
      files: {
        "jquery.js": [
          'node_modules/jquery/dist/jquery.min.js',
          'node_modules/jquery-hoverintent/jquery.hoverIntent.js',
        ],
      }
    }),
  ],
};

Please take a look at splitchunks. I'd like the visuals chunk to be globally accessible. More specifically, the scripts/libraries bundled into visuals.js. I'm not sure about how to apply the 'library' configuration to that. But maybe I'm doing it the wrong way?

The 'visuals' libraries are currently imported in shared.js (src) and thus extracted from there into visuals.js (dist).
Maybe it's not the easier/smartest/recommended way?

[samagragupta]

Did you get any way how to do that?

[stratboy]

Hi, not exactly: the code above is currently working, but the libraries are not available globally: they're imported each time I need them. Though, they then get splitted into one single chunk as per configuration. And in the end of the game, that's what I want/need, after all.. I mean, even if for example Swiper gets imported into several .js files, it gets auto-extracted into visuals.js and thus will be loaded only 1 time and then cached.

[samagragupta]

Check this: #11909