webpack相关总结

      this.callback(
        err: Error | null,
        content: string | Buffer,
        sourceMap?: SourceMap,
        meta?: any
      );

    // content 
    module.exports = function(content, map, meta) { 
      return someDealFunc(content) // 直接返回同步执行逻辑 同步loader会阻塞webpack编译
    }
    module.exports = function(content, map, meta) {
      // 通过callback触发
      this.callback(null, someDealFunc(content), map, meta)
      // 需要这个return 显示的返回undefined 
      return 
    }

    module.exports = function(content, map, meta) {
    // 告知loader-runner是一个异步loader 异步loader不会阻塞webpack编译
      const callback = this.async();
      someAsyncOperation(content, function(err, result) {
        if (err) return callback(err);
        callback(null, result, map, meta);
      });
    };

      // 同步钩子
      class MyPlugin {
        apply (compiler) {
          // 找到合适的事件钩子,实现自己的插件功能
          compiler.hooks.emit.tap('MyPlugin', compilation => {
              // compilation: 当前打包构建流程的上下文
              console.log(compilation);
              // do something...
          })
        }
      }
      // 异步钩子
      class MyPlugin {
        apply (compiler) {
          // 找到合适的事件钩子,实现自己的插件功能
          compiler.hooks.run.tapAsync('MyPlugin', (compilation, callback) => {
              // compilation: 当前打包构建流程的上下文
              console.log(compilation);
              // 这里调用这个callback 表示这个异步操作结束了
              callback()
          })
          compiler.hooks.run.tapPromise('MyPlugin', (compilation) => {
          // compilation: 当前打包构建流程的上下文
          return new Promise((resolve, reject) => {
            resolve(11)
          })
      })
        }
      }

          // 立即执行函数,创建独立的作用域
/******/ (() => { // webpackBootstrap
          // 定义所有的模块
/******/   var __webpack_modules__ = ({
/******/     "./src/moduleA.js":
/******/       ((__unused_webpack_module, exports) => {
/******/         exports.foo = function() {
/******/           return 'Hello from moduleA';
/******/         };
/******/       })
/******/   });
/******/   // 模块缓存 
/******/   var __webpack_module_cache__ = {};
           // 指定模块加载逻辑
/******/   function __webpack_require__(moduleId) {
/******/     // 检查模块是否在缓存中
/******/     if(__webpack_module_cache__[moduleId]) {
/******/       return __webpack_module_cache__[moduleId].exports;
/******/     }
/******/     // 如果不在缓存中,创建新的模块并放入缓存
/******/     var module = __webpack_module_cache__[moduleId] = {
/******/       exports: {}
/******/     };
/******/     // 执行模块函数 传入预设的参数
/******/     __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/     // 返回模块的导出内容
/******/     return module.exports;
/******/   }
           // 启动入口模块
/******/   var __webpack_exports__ = __webpack_require__("./src/index.js");
/******/   // ...
/******/ })()

    // 主应用
    const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

    module.exports = {
        // ...
        plugins: [
            new ModuleFederationPlugin({
                name: "mainApp", // 主应用的名字
                remotes: { // 远程模块配置 名称入口文件
                    remoteApp: "remoteApp@http://localhost:3001/remoteEntry.js",
                },
                // 共享模块
                shared: ["lodash"],
            }),
        ],
    };

    // 远程应用
    const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

    module.exports = {
        // ...
        plugins: [
            new ModuleFederationPlugin({
                name: "remoteApp", // 远程应用的名字
                filename: "remoteEntry.js", // 远程应用的入口文件
                exposes: { // 指定要共享出去的模块
                    "./Button": "./src/Button",
                },
                // 共享模块
                shared: ["lodash"],
            }),
        ],
    };

    // 主应用中的代码 动态加载远程模块

    const remoteApp = import("remoteApp/Button");

    remoteApp.then((Button) => {
        // 使用远程模块
        const button = new Button();
        document.body.appendChild(button);
    });