Webpack AMD module output file contents are different between WebPack document example and actual result

Question

I am developing my own build system using Webpack AMD module.

I'd like to make the result like the following block quoted https://webpack.js.org/configuration/output/#module-definition-systems.

define('MyLibrary', [], function() {
  return _entry_return_;
});

So, I compiled the following code.

import React from "react";

export const Nav = () => {
  return nav;
};

And then my expected code is in the following block.

define('Nav', ['react'], function(a) {

  return a.createElement('div',null,'nav');
});

But, result output entries are something different.

First, Webpack entry result contains too many codes webpackBootstrap, module cache codes, etc...

Second, Output modules are referencing dependencies by number Id.

/******/ (() => { // webpackBootstrap
/******/    "use strict";
/******/    var __webpack_modules__ = ({

/***/ 869:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  "Nav": () => /* binding */ Nav
});

;// CONCATENATED MODULE: external "react"
const external_react_namespaceObject = react;
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
;// CONCATENATED MODULE: ./modules/nav/src/frNav.tsx

var Nav = function Nav() {
  return /*#__PURE__*/external_react_default().createElement("div", null, "nav");
};

/***/ })

/******/    });
/************************************************************************/
/******/    // The module cache
/******/    var __webpack_module_cache__ = {};
/******/    
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/        // Check if module is in cache
/******/        if(__webpack_module_cache__[moduleId]) {
/******/            return __webpack_module_cache__[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = __webpack_module_cache__[moduleId] = {
/******/            // no module.id needed
/******/            // no module.loaded needed
/******/            exports: {}
/******/        };
/******/    
/******/        // Execute the module function
/******/        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/    
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/    
/************************************************************************/
/******/    /* webpack/runtime/compat get default export */
/******/    (() => {
/******/        // getDefaultExport function for compatibility with non-harmony modules
/******/        __webpack_require__.n = (module) => {
/******/            var getter = module && module.__esModule ?
/******/                () => module['default'] :
/******/                () => module;
/******/            __webpack_require__.d(getter, { a: getter });
/******/            return getter;
/******/        };
/******/    })();
/******/    
/******/    /* webpack/runtime/define property getters */
/******/    (() => {
/******/        // define getter functions for harmony exports
/******/        __webpack_require__.d = (exports, definition) => {
/******/            for(var key in definition) {
/******/                if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/                    Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/                }
/******/            }
/******/        };
/******/    })();
/******/    
/******/    /* webpack/runtime/hasOwnProperty shorthand */
/******/    (() => {
/******/        __webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
/******/    })();
/******/    
/******/    /* webpack/runtime/make namespace object */
/******/    (() => {
/******/        // define __esModule on exports
/******/        __webpack_require__.r = (exports) => {
/******/            if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/                Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/            }
/******/            Object.defineProperty(exports, '__esModule', { value: true });
/******/        };
/******/    })();
/******/    
/************************************************************************/
/******/    // startup
/******/    // Load entry module
/******/    __webpack_require__(869);
/******/    // This entry module used 'exports' so it can't be inlined
/******/ })()
;
//# sourceMappingURL=frNav.tsx.js.map

I don't need many codes like above block. Because I am going to use requirejs or systemjs to load my modules and make my own bundling tool called modules bootloader to execute.

Could I reduce webpack AMD module output result?

This is my webpack configuration.

{
      entry: { [this.entryName]: this.absoluteFilePath },
      devtool: "source-map",
      module: {
        rules: [
          {
            test: /\.(ts|js)x?$/,
            exclude: /node_modules/,

            use: {
              loader: "babel-loader",
              options: {
                presets: [
                  "@babel/preset-env",
                  "@babel/preset-react",
                  "@babel/preset-typescript",
                ],
              },
            },
          },
        ],
      },
      output: {
         
        filename: "[name].js",
        library: "@" + this.parentModule.moduleName + "/@[name]",
        sourceMapFilename: "[name].js.map",
        path: path.resolve(this.parentModule.absoluteModulePath, "built"),
      },
      externals: ["react"],
      resolve: {
        extensions: [".tsx", ".ts", ".js"],
        alias: {
          react: "react",
        },
      },

      optimization: {
        minimize: false,
        usedExports: false,
      },
       
    }

Thank you for your reading and helping me.

Webpack AMD module output file contents are different between WebPack document example and actual result

Answers (1)

Related Questions