Question

我使用下面的webpack配置生成一个＆＃34; DLL＆＃34;束。我无法弄清楚为什么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"
    },
};

Answer 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),

这就是我想要的，我的所有lib都共享一份jquery。

N.B。禁用AMD无法解决问题，因为CJS正在尝试使用相同的路径。

如何强制DLL插件共享库？

1 个答案: