Is there a way to expose module globally from Webpack DllPlugin vendor bundle?

Question

Using Webpack 4, I'm creating a bundle and a vendors bundle. Vendor bundle contains jQuery and the code bundle references jquery using 'import * from jquery'. This works perfectly.

However, I now need to use a 3rd party (already minified) javascript file. That file expects jquery to be exposed as '$' on the global window object. My bundle needs to be loaded after the new minified file, also.

So I have:

<script src='./libs/jquery-3.2.1.min.js'></script>
<script src='../vendor.js'></script>
<script src="./libs/newMinifiedFile.js"></script>
<script src="../bundle.js"></script>

as my current workaround. The static jquery file links the $ objects to the global namespace, and then the vendor.js file allows me to keep using 'import' in my bundle.

So, how do I only load jquery once, and use it in both ways? This seems to be a slightly different problem than most I've seen online because of how I'm loading things.

Here's a small example of my configs right now:

const config = (isDebug) => {
const isDevBuild = isDebug;
const extractCSS = new MiniCssExtractPlugin({filename: 'vendor.css'});

const sharedConfig = {
    mode: isDevBuild ? 'development' : 'production',
    stats: { modules: false },
    resolve: { 
        extensions: [ '.js' ]
    },
    module: {
        rules: [
            { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' },
        ]
    },
    entry: {
        vendor: [
            'jquery'
        ],
    },
    output: {
        publicPath: 'dist/',
        filename: '[name].js',
        library: '[name]_[hash]',
    },
    plugins: [
        new webpack.NormalModuleReplacementPlugin(/\/iconv-loader$/, require.resolve('node-noop')) // Workaround for https://github.com/andris9/encoding/issues/16
    ]
};

const clientBundleConfig = merge(sharedConfig, {
    output: { 
        path: path.join(__dirname, 'wwwroot', 'dist'),
        pathinfo: false
    },
    module: {
      rules: [
        {
          test: /\.css(\?|$)/, include: path.resolve(__dirname, "client"), exclude: [/webviewer/, /redux/, /helpers/],
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                minimize: isDevBuild,
                sourceMap: isDevBuild
              }
            }
          ]
        }
      ]
    },
    plugins: [
        extractCSS,
        new webpack.DllPlugin({
            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ],
    optimization: {
      minimize: !isDevBuild,
      removeAvailableModules: false,
      removeEmptyChunks: false,
      splitChunks: false,
    },
});

And in my normal config I use:

          new webpack.DllReferencePlugin({
          context: __dirname,
          manifest: require(path.join(__dirname, 'wwwroot', 'dist', 'vendor-manifest.json'))
      })

So, I can find jquery in the global 'vendor_hash' object, but I can't get it to map it to $ no matter what I try (Most plugins seem to see that $ is never used in any of the code I'm supplying for the bundle and thus don't seem to include it). If I add something like this in my 'entry.js' file then it still doesn't work:

window.$ = window.jQuery = require("jquery");

Is there a way to expose module globally from Webpack DllPlugin vendor bundle?

0 Answers0