javascript - webpack compiles different results for the same js files introduced in different ways

Question

vue-cli In the project generated by webpack, when the jquery.mockjax.js file is introduced using require in main.js, different compilation results appear.
The source code part is in UMD format

(function(root, factory) {
    'use strict';
    console.log(arguments);
    console.log('root', root);
    // AMDJS module definition
    if ( typeof define === 'function' && define.amd && define.amd.jQuery ) {
        console.log('this is in amdjs module definition');
        define(['jquery'], function($) {
            return factory($, root);
        });

    // CommonJS module definition
    } else if ( typeof exports === 'object' && module.exports) {
        console.log('this is CommonJs module definition');

        // NOTE: To use Mockjax as a Node module you MUST provide the factory with
        // a valid version of jQuery and a window object (the global scope):
        // var mockjax = require('jquery.mockjax')(jQuery, window);

        module.exports = factory;

    // Global jQuery in web browsers
    } else {
        console.log('this is global jquery in web browsers');
        return factory(root.jQuery || root.$, root);
    }
}(this, function($, window) {
    'use strict';

method one:

Download the version directly from the official website of jquery.mockjax.js, then place it in the assets folder of the project and quote it as follows in main.js:

require('./assets/jquery.mockjax.js');

Final packaged version of webpack

eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* WEBPACK VAR INJECTION */(function(module) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_json_stringify__ = __webpack_require__(54);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_json_stringify___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_json_stringify__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_typeof__ = __webpack_require__(57);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_typeof___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_typeof__);\n\n\n(function (root, factory) {\n\t'use strict';\n\n\tconsole.log(arguments);\n\tconsole.log('root', root);\n\n\tif (typeof define === 'function' && __webpack_require__(44) && __webpack_require__(44).jQuery) {\n\t\tconsole.log('this is in amdjs module definition');\n\t\tdefine(['jquery'], function ($) {\n\t\t\treturn factory($, root);\n\t\t});\n\t} else if ((typeof exports === 'undefined' ? 'undefined' : __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_typeof___default()(exports)) === 'object' && module.exports) {\n\t\tconsole.log('this is CommonJs module definition');\n\n\t\tmodule.exports = factory;\n\t} else {\n\t\tconsole.log('this is global jquery in web browsers');\n\t\treturn factory(root.jQuery || root.$, root);\n\t}\n})(this, function ($, window)

Method 2:

Use the npm package to install jquery-mockjax, and then quote it as follows in main.js:

require('jquery-mockjax');

Final packaging version of webpack:

eval("var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function(root, factory) {\n\t'use strict';\n\tconsole.log(arguments);\n\tconsole.log('root', root);\n\t// AMDJS module definition\n\tif ( \"function\" === 'function' && __webpack_require__(9) && __webpack_require__(9).jQuery ) {\n\t\t!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(6)], __WEBPACK_AMD_DEFINE_RESULT__ = function($) {\n\t\t\treturn factory($, root);\n\t\t}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),\n\t\t\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\n\t// CommonJS module definition\n\t} else if ( true) {\n\t\tconsole.log('in npm modules', typeof exports);\n\t\t// NOTE: To use Mockjax as a Node module you MUST provide the factory with\n\t\t// a valid version of jQuery and a window object (the global scope):\n\t\t// var mockjax = require('jquery.mockjax')(jQuery, window);\n\n\t\tmodule.exports = factory;\n\n\t// Global jQuery in web browsers\n\t} else {\n\t\treturn factory(root.jQuery || root.$, root);\n\t}\n}(this, function($, window) 

doubt:

The js files imported according to the module and the js files introduced according to the relative path are checked to be the same code. Webpack compiles them differently. At present, I have checked the webpack documentation and found no valid information. If anyone knows anything about webpack, please give me some advice.

Answer 1

The referenced js files are not the same. The contents are inconsistent