如何强制 DLL 插件共享库？答案

【问题标题】：How to force DLL plugin to share a library?如何强制 DLL 插件共享库？
【发布时间】：2018-03-21 17:09:26
【问题描述】：

我正在使用下面的 webpack 配置来生成一个“DLL”包。我不明白为什么jquery-validate 不会从同一个入口点使用jquery 的同一个副本。

webpack 为jquery-validate 生成的代码是这样的：

/***/ "./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, {

如您所见，它指向的是"./node_modules/jquery-validation/node_modules/jquery/src/jquery.js"，而不是./node_modules/jquery/...。怎么会？当同一个入口点中有另一个 jquery 时，为什么它使用自己的 jquery 内部副本？我检查了版本约束，它们似乎匹配。

/* 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"
    },
};

【问题讨论】：

标签： jquery webpack webpack-4

【解决方案1】：

我突然想到，webpack 是使用我的alias，因为它使用jquery/src/jquery.js 而不是jquery/dist/jquery.js，但由于我给了它一个相对路径，它相对于包进行解析.

删除别名并不能解决问题，但是，我可以只给它一个绝对路径！

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

现在吐出来了

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

这是我想要的，我所有的库都共享一个 jquery 的副本。

注意禁用 AMD 并不能解决问题，因为 CJS 正在尝试使用相同的路径。

【讨论】：