Webpack AMD 模块输出文件内容与 WebPack 文档示例和实际结果不同

如何解决Webpack AMD 模块输出文件内容与 WebPack 文档示例和实际结果不同

我正在使用 Webpack AMD 模块开发自己的构建系统。

我想让结果像下面引用的块https://webpack.js.org/configuration/output/#module-definition-systems。

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

所以，我编译了以下代码。

import React from "react";

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

然后我预期的代码在以下块中。

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

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

但是，结果输出条目有所不同。

首先，Webpack 入口结果包含太多的代码 webpackBootstrap、模块缓存代码等...

其次，输出模块通过编号 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","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

我不需要像上面块那样的很多代码。 因为我将使用 requirejs 或 systemjs 加载我的模块并制作我自己的名为 modules bootloader 的捆绑工具来执行。

我可以减少 webpack AMD 模块输出结果吗？

这是我的 webpack 配置。

{
      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,}

感谢您的阅读和帮助。

解决方法

你不需要 Webpack，Babel 可以自己做，你只需要一个 AMD 插件：

https://www.npmjs.com/package/babel-plugin-transform-modules-simple-amd

我记得我用过这个。