How to force DLL plugin to share a library?

Question

I'm using the webpack config below to generate a "DLL" bundle. What I can't figure out is why jquery-validate won't use the same copy of jquery from the same entry-point.

The code that webpack generates for jquery-validate is this:

/***/ "./node_modules/jquery-validation/dist/jquery.validate.js":
/***/ (function(module, exports, __webpack_require__) {

    var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
 * jQuery Validation Plugin v1.17.0
 *
 * https://jqueryvalidation.org/
 *
 * Copyright (c) 2017 Jörn Zaefferer
 * Released under the MIT license
 */
    (function( factory ) {
        if ( true ) {
            !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__("./node_modules/jquery-validation/node_modules/jquery/src/jquery.js")], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
                __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
                    (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
            __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
        } else {}
    }(function( $ ) {

        $.extend( $.fn, {

As you can see, it's pointing to "./node_modules/jquery-validation/node_modules/jquery/src/jquery.js" instead of ./node_modules/jquery/.... How come? Why is it using its own internal copy of jquery when there's another jquery in the same entry point? I checked the version constraints and they appear to match.

/* eslint-env node */
"use strict";
process.noDeprecation = true;

const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const EntryChunksPlugin = require('../plugins/entry-chunks');
const {projectDir,wxEnv,stdEnv,copyrightPatt} = require('./shared');

module.exports = {
    mode: stdEnv,
    target: 'web',
    context: projectDir,
    output: {
        publicPath: '/assets/',
        path: `${projectDir}/www/assets`,
        pathinfo: false,
        crossOriginLoading: 'anonymous',
        filename: '[name].[chunkhash].js',
        chunkFilename: 'chunk.[chunkhash].js',
        library: "__dll_[name]__"
    },
    devtool: 'source-map',
    entry: {
        react: [
            'react',
            'react-dom',
            'redux',
            'react-dnd',
            'react-dnd-html5-backend',
            'recompose',
            "immutability-helper2",
            "immutable",
            "classnames",
        ],
        jquery: [
            'sizzle',
            'jquery',
            'jquery-expander',
            'jquery-migrate',
            'jquery-ui',
            'jquery-ui-touch-punch',
            'jquery-validation',
            'jquery.cookie',
            'jquery.taps',
            'jquery.transit',
            'datatables.net',
            // 'datatables.net-dt',
            'selectize',
            'fancybox',
        ],
        lodash: [
            'lodash',
            'lodash3',
            'underscore.string',
            'sprintf-js',
        ],
        time: [
            'moment',
            'timezone-js',
        ],
        misc: [
            'numeral',
            'pubsub-js',
            'whatwg-fetch',
            'jwt-decode',
            'socket.io-client',
            'highcharts',
            'sanitize-filename',
        ],
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            _: 'lodash',
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(stdEnv), 
            },
        }),
        new webpack.DllPlugin({
            path: `${__dirname}/../manifests/[name].json`,
            name: "__dll_[name]__",
        }),
        new EntryChunksPlugin({
            filename: `${__dirname}/../stats/dll.json`,
        }),
    ],
    resolve: {
        alias: {
            'jquery': 'jquery/src/jquery',
            'jquery-ui/ui/widget': 'jquery-ui/widget',
        }
    },
    node: {
        __filename: true,
        __dirname: true,
        fs: "empty"
    },
};

score 0 · Answer 1 · answered Mar 21 '18 at 17:16

It just occurred to me that webpack is using my alias because it's putting jquery/src/jquery.js instead of jquery/dist/jquery.js, but since I gave it a relative path, it's resolving relative to the package.

Removing the alias doesn't fix, however, I can just give it an absolute path!

resolve: {
    alias: {
        'jquery': require.resolve('jquery/src/jquery'),
        'jquery-ui/ui/widget': require.resolve('jquery-ui/widget'),
    }
},

Now it spits out

!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__("./node_modules/jquery/src/jquery.js")], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),

Which is what I wanted, and all my libs share a copy of jquery.

N.B. Disabling AMD doesn't fix the issue because CJS is trying to use the same path.

How to force DLL plugin to share a library?

1 Answers1