Read a little every day webpack-001

Read a little webpack every day

day-01-webpack entrance

• npm package we can package.json quickly locate package information in the file to import documents this package through webpack package information main can get the whole field webpack entrance location of the project is lib/index.js

Entry file

• The entry file integrates the various modules of the project through dynamic import, such as various internal plug-ins, internal dependencies, internal configuration information, etc.

Package cache

• In the entry file, webpack lazyFunction . The source code is as follows

  // 通过 lazyFunction 对指定包进行缓存操作
  const fn = lazyFunction(() => require("./webpack"));

• How to implement package caching? lazyFunction actually uses the closure method to cache the packet. memoize key source code first, the fn the execution result of the input function 0616a5c5c0e7e6 by way of closure, so that next time you want to get fn function, you do not need to execute the fn method.

  const memoize = fn => {
  let cache = false
  let result = undefined
  // 返回一个函数 构造一个 闭包，用于缓存 fn 函数的返回值
  return () => {
    if(cache) {
      return result
    }else {
      result = fn()
      cache = true
      return result
    }
  }
  }

• The lazyFunction is just a simple encapsulation of the above memoize method, so that the returned method supports parameter transfer, which is actually equivalent to a currying process. But memoize did not accept its incoming parameters, so this package has no effect. In fact, you can directly memoize fn parameter as the return value function, and pass it to the 0616a5c5c0e8a8 function to achieve the desired effect.

  const lazyFunction = factory => {
    const fac = memoize(factory);
    const f = (...args) => {
        return fac()(...args);
    }
    return f;
  };

Consolidation of packages

• Entry file does not rely on a simple combination, but by mergeExports were each module methods assembly . This method mainly uses Object.defineProperty to achieve the purpose of object assembly. The purpose of this method is to better control the properties of the object, such as read, write, delete, and enumerate . The relevant source code is as follows

  • getOwnPropertyDescriptors used to obtain the descriptor of all attributes

  • This method uses a recursive method to spread out the attributes of the object type, so that the source code module special relationship can be maintained while reducing the complexity of the module function application .

    const mergeExports = (obj, exports) => {
    const descriptors = Object.getOwnPropertyDescriptors(exports);
    for (const name of Object.keys(descriptors)) {
        const descriptor = descriptors[name];
        if (descriptor.get) {
            const fn = descriptor.get;
            Object.defineProperty(obj, name, {
                configurable: false,
                enumerable: true,
                get: memoize(fn)
            });
        } else if (typeof descriptor.value === "object") {
            Object.defineProperty(obj, name, {
                configurable: false,
                enumerable: true,
                writable: false,
        // 通过递归的方式将 对象类型的 属性 平铺开来
                value: mergeExports({}, descriptor.value)
            });
        } else {
            throw new Error(
                "Exposed values must be either a getter or an nested object"
            );
        }
    }
    return /** @type {A & B} */ (Object.freeze(obj));
    };