0

我正在使用下面的 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"
    },
};
4

1 回答 1

0

我突然想到 webpack正在使用 my alias，因为它使用的是 putjquery/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 正在尝试使用相同的路径。

于 2018-03-21T17:16:25.937 回答