学习链接

• 【webpack系列】webpack打包组件和基础库
• Output | webpack

核心

• library的值被如何使用，会根据libraryTarget的取值不同而不同。libraryTarget配置的作用是控制 webpack 打包的内容是如何暴露的

测试代码

• 大整数加法

// src/large-number.js
export default function add(a, b) {
  let i = a.length - 1;
  let j = b.length - 1;
  let res = ''; // 结果
  let carray = 0; // 进位值
  while (i >= 0 || j >= 0) {
    let x = 0;
    let y = 0;
    let sum;
    if (i >= 0) {
      x = a[i] - '0'; // 转换为数字
      i--;
    }
    if (j >= 0) {
      y = b[j] - '0'; // 转换为数字
      j--;
    }
    sum = x + y + carray;
    if (sum >= 10) {
      carray = 1;
      sum -= 10;
    } else {
      carray = 0;
    }
    res = sum + res;
  }
  if (carray > 0) {
    res = carray + res;
  }
  return res;
}

默认配置

• var

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'none',
  entry: {
    'large-number': './src/large-number.js',
  },
  output: {
    path: path.resolve(__dirname, 'modules'),
    filename: '[name].var.js',
    library: 'largeNumber', // 指定库的名称，及库的全局变量
    libraryTarget: 'var', // 支持库引入的方式
  },
};

• 输出

var largeNumber;
largeNumber = (() => {
  "use strict";
  var __webpack_modules__ = [
    (__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
      __webpack_require__.r(__webpack_exports__);
      __webpack_require__.d(__webpack_exports__, {
        default: () => add,
      });
      function add(a, b) {
        let i = a.length - 1;
        let j = b.length - 1;
        let res = "";
        let carray = 0;
        while (i >= 0 || j >= 0) {
          let x = 0;
          let y = 0;
          let sum;
          if (i >= 0) {
            x = a[i] - "0";
            i--;
          }
          if (j >= 0) {
            y = b[j] - "0";
            j--;
          }
          sum = x + y + carray;
          if (sum >= 10) {
            carray = 1;
            sum -= 10;
          } else {
            carray = 0;
          }
          res = sum + res;
        }
        if (carray > 0) {
          res = carray + res;
        }
        return res;
      }
    },
  ];
  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;
  }
  /* webpack/runtime/define property getters */
  (() => {
    __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 */
  (() => {
    __webpack_require__.r = (exports) => {
      if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
        Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
      }
      Object.defineProperty(exports, "__esModule", { value: true });
    };
  })();
  return __webpack_require__(0);
})();

• 函数调用
  • webpack_require(0)
  • webpack_modules[0](module, module.exports, webpack_require)（绑定exports）
  • largeNumber 赋值
    

libraryExport 设置导出模块

 output: {
    libraryExport: 'default',
  },

 output: {
    libraryExport: 'MyModule',
  },

 output: {
    libraryExport: ['MyModule', 'MySubModule'],
  },

libraryTarget 控制 library 的暴露方式

• Expose a Variable

  • var（默认）

  • libraryTarget（无 var 声明）
    

  • assign-properties（对象赋值）
    

Expose Via Object Assignment（通过在对象上赋值暴露）

• libraryTarget: ‘this’（global，window，commonjs类似，导出各自的全局/模块变量）
  

模块定义系统

• 兼容模块系统

  • commonjs

  • amd
    

  • umd（兼容所有模块系统）
    

测试代码

• https://github.com/baixc1/csdn/tree/master/note/note20