console.log(require("../dll/alpha"));
// 这行app端的require语句会在webpack编译后的包中变成以下形式
__webpack_require__("dll-reference alpha_21c1490edb92ec8e9390")("./alpha.js")
// 前面的dll-reference alpha_21c1490edb92ec8e9390实际上是dll-reference前缀加上
// alpha_21c1490edb92ec8e9390这个包名
__webpack_require__("dll-reference alpha_21c1490edb92ec8e9390")
// 上面的这句话实际上是下面这样返回alpha_21c1490edb92ec8e9390这个全局变量
function(module, exports) {
eval("module.exports = alpha_21c1490edb92ec8e9390;\n\n");})
// 而alpha_21c1490edb92ec8e9390这个变量的定义可以简单理解为
// 一个可以require alpha_21c1490edb92ec8e9390这个包内模块的__webpack_require__函数
var alpha_21c1490edb92ec8e9390 = (function (modules) {
    function __webpack_require__(moduleId) {
        ...
        return module.exports
    }
    return __webpack_require__
})({'./alpha': ..., ...})

var path = require('path');
var webpack = require('webpack');
module.exports = {
    mode: 'development',
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    entry: {
        alpha: ['./alpha', './a', 'module'],
        beta: ['./beta', './b', './c'],
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'MyDll.[name].js',
        library: '[name]_[hash]',
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, 'dist', '[name]-manifest.json'),
            name: '[name]_[hash]',
        }),
    ],
};

// /dll-user/webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'example.js'),
    output: {
        path: path.join(__dirname, 'js'),
        filename: 'output.js',
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: path.join(__dirname, '..', 'dll', 'dist'),
            manifest: require('../dll/dist/alpha-manifest.json'), // eslint-disable-line
        }),
        new webpack.DllReferencePlugin({
            scope: 'beta',
            manifest: require('../dll/dist/beta-manifest.json'), // eslint-disable-line
            extensions: ['.js', '.jsx'],
        }),
    ],
};

// /dll-user/example.js
console.log(require('../dll/alpha'));
console.log(require('../dll/a'));

console.log(require('beta/beta'));
console.log(require('beta/b'));
console.log(require('beta/c'));

compiler.hooks.compile.tap('DllReferencePlugin', params => {
  let name = this.options.name
  let sourceType = this.options.sourceType
  let content = 'content' in this.options ? this.options.content : undefined
  if ('manifest' in this.options) {
    let manifestParameter = this.options.manifest
    let manifest
    if (typeof manifestParameter === 'string') {
      // If there was an error parsing the manifest
      // file, exit now because the error will be added
      // as a compilation error in the "compilation" hook.
      if (params['dll reference parse error ' + manifestParameter]) {
        return
      }
      manifest =
        /** @type {DllReferencePluginOptionsManifest} */ (params[
          'dll reference ' + manifestParameter
        ])
    } else {
      manifest = manifestParameter
    }
    if (manifest) {
      if (!name) name = manifest.name
      if (!sourceType) sourceType = manifest.type
      if (!content) content = manifest.content
    }
  }
  const externals = {}
  const source = 'dll-reference ' + name
  externals[source] = name
  const normalModuleFactory = params.normalModuleFactory
  new ExternalModuleFactoryPlugin(sourceType || 'var', externals).apply(
    normalModuleFactory
  ) /* 这里把"dll-reference " + name作为externals的字段，
      对应上面说的dll-reference alpha_21c1490edb92ec8e9390，
      而externals的variable的变量名就是包名alpha_21c1490edb92ec8e9390，
      对应上面提到的module.exports = alpha_21c1490edb92ec8e9390
    */
  new DelegatedModuleFactoryPlugin({
    source: source,
    type: this.options.type,
    scope: this.options.scope,
    context: this.options.context || compiler.options.context,
    content,
    extensions: this.options.extensions
  }).apply(normalModuleFactory)
  // 这里的DelegatedModuleFactoryPlugin的作用,
  // 实际上是把提到的console.log(require("../dll/alpha"));的require
  // 变成__webpack_require__("dll-reference alpha_21c1490edb92ec8e9390")("./alpha.js")，
  // 也就是说代理到dll-reference alpha_21c1490edb92ec8e9390上
    
})

// 下面是DelegatedModuleFactoryPlugin的执行流程
apply(normalModuleFactory) {
  const scope = this.options.scope;
  if (scope) { //这里可以看一下上面beta.dll的scope
    normalModuleFactory.hooks.factory.tap(
      "DelegatedModuleFactoryPlugin",
      factory => (data, callback) => {
        const dependency = data.dependencies[0];
        const request = dependency.request;
        if (request && request.indexOf(scope + "/") === 0) {
          //可以看出它会先把scope去掉，让"." + 剩下的部分作为实际的require请求
          const innerRequest = "." + request.substr(scope.length);
          let resolved;
          if (innerRequest in this.options.content) {
            //会在manifest.json的content中找 实际的require请求 的对应字段
            resolved = this.options.content[innerRequest];
            return callback(
              null,
              new DelegatedModule(
                this.options.source,
                resolved,
                this.options.type,
                innerRequest,
                request
              )
            );
          }
          for (let i = 0; i < this.options.extensions.length; i++) {
            const extension = this.options.extensions[i];
            const requestPlusExt = innerRequest + extension;
            if (requestPlusExt in this.options.content) {
              resolved = this.options.content[requestPlusExt];
              return callback(
                null,
                new DelegatedModule(
                  this.options.source,
                  resolved,
                  this.options.type,
                  requestPlusExt,
                  request + extension
                )
              );
            }
          }
        }
        return factory(data, callback);
      }
    );
  } else {
    normalModuleFactory.hooks.module.tap(
      "DelegatedModuleFactoryPlugin",
      module => {
        if (module.libIdent) {
          // 这里其实跟上面去除scope的作用是类似的，把前面的context去掉，留下实际的request
          const request = module.libIdent(this.options);
          if (request && request in this.options.content) {
            const resolved = this.options.content[request];
            return new DelegatedModule(
              this.options.source,
              resolved,
              this.options.type,
              request,
              module
            );
          }
        }
        return module;
      }
    );
  }
}
//无论是否使用scope最后生成的都是一个DelegatedModule

//DelegatedModule的source方法可以印证上面DelegatedModuleFactoryPlugin的作用，以demo为例
source(depTemplates, runtime) {
    const dep = /** @type {DelegatedSourceDependency} */ (this.dependencies[0]);
    const sourceModule = dep.module;
    let str;

    if (!sourceModule) {
      str = WebpackMissingModule.moduleCode(this.sourceRequest);
    } else {
      str = `module.exports = (${runtime.moduleExports({
        module: sourceModule,
        request: dep.request
            })})`;
// 这一部分对应webpack/lib/RuntimeTemplate.js的moduleExports方法，
// 生成module.exports = __webpack_require__("dll-reference alpha_21c1490edb92ec8e9390")部分
      switch (this.type) {
        case "require":
          str += `(${JSON.stringify(this.request)})`; //这里再在str后加上("./alpha.js")
          break;
        case "object":
          str += `[${JSON.stringify(this.request)}]`;
          break;
      }

      str += ";";
    }
}

   //external模块为global变量
getSourceForGlobalVariableExternal(variableName, type) {
	if (!Array.isArray(variableName)) {
		// make it an array as the look up works the same basically
		variableName = [variableName];
	}

	// needed for e.g. window["some"]["thing"]
	const objectLookup = variableName
		.map(r => `[${JSON.stringify(r)}]`)
		.join("");
	return `(function() { module.exports = ${type}${objectLookup}; }());`;
}
   //external模块为commonjs模块
getSourceForCommonJsExternal(moduleAndSpecifiers) {
	if (!Array.isArray(moduleAndSpecifiers)) {
		return `module.exports = require(${JSON.stringify(
			moduleAndSpecifiers
		)});`;
	}

	const moduleName = moduleAndSpecifiers[0];
	const objectLookup = moduleAndSpecifiers
		.slice(1)
		.map(r => `[${JSON.stringify(r)}]`)
           .join("");
       //e.g. 输出格式require("some")["thing"]
	return `module.exports = require(${JSON.stringify(
		moduleName
	)})${objectLookup};`;
}

   //external模块为amd或umd模块
getSourceForAmdOrUmdExternal(id, optional, request) {
	const externalVariable = `__WEBPACK_EXTERNAL_MODULE_${Template.toIdentifier(
		`${id}`
	)}__`;
	const missingModuleError = optional
		? this.checkExternalVariable(externalVariable, request)
		: "";
	return `${missingModuleError}module.exports = ${externalVariable};`;
}

   //external模块为一个普通的全局变量
getSourceForDefaultCase(optional, request) {
	if (!Array.isArray(request)) {
		// make it an array as the look up works the same basically
		request = [request];
	}

	const variableName = request[0];
	const missingModuleError = optional
		? this.checkExternalVariable(variableName, request.join("."))
		: "";
	const objectLookup = request
		.slice(1)
		.map(r => `[${JSON.stringify(r)}]`)
           .join("");
       //e.g.输出格式module.exports = some["thing"];
	return `${missingModuleError}module.exports = ${variableName}${objectLookup};`;
   }

module.exports = {
    //...
    externals: [
        {
            // String
            react: 'react',
            // Object
            lodash: {
                commonjs: 'lodash',
                amd: 'lodash',
                root: '_', // indicates global variable
            },
            // Array
            subtract: ['./math', 'subtract'],
        },
        // Function
        function(context, request, callback) {
            if (/^yourregex$/.test(request)) {
                return callback(null, 'commonjs ' + request);
            }
            callback();
        },
        // Regex
        /^(jquery|\$)$/i,
    ],
};

const handleExternal = (value, type, callback) => {
    if (typeof type === "function") {
        callback = type;
        type = undefined;
    }
    if (value === false) return factory(data, callback);
    if (value === true) value = dependency.request;
    if (type === undefined && /^[a-z0-9]+ /.test(value)) {
        const idx = value.indexOf(" ");
        type = value.substr(0, idx);
        value = value.substr(idx + 1);
    }
    callback(
        null,
        new ExternalModule(value, type || globalType, dependency.request)
    );
    return true;
};
...
if (typeof externals === "string") {
    if (externals === dependency.request) {
        return handleExternal(dependency.request, callback);
    }
} else if (Array.isArray(externals)) {
    let i = 0;
    const next = () => {
        let asyncFlag;
        const handleExternalsAndCallback = (err, module) => {
            if (err) return callback(err);
            if (!module) {
                if (asyncFlag) {
                    asyncFlag = false;
                    return;
                }
                return next();
            }
            callback(null, module);
        };

        do {
            asyncFlag = true;
            if (i >= externals.length) return callback();
            handleExternals(externals[i++], handleExternalsAndCallback);
        } while (!asyncFlag);
        asyncFlag = false;
    };

    next();
    return;
} else if (externals instanceof RegExp) {
    if (externals.test(dependency.request)) {
        return handleExternal(dependency.request, callback);
    }
} else if (typeof externals === "function") {
    externals.call(
        null,
        context,
        dependency.request,
        (err, value, type) => {
            if (err) return callback(err);
            if (value !== undefined) {
                handleExternal(value, type, callback);
            } else {
                callback();
            }
        }
    );
    return;
} else if (
    typeof externals === "object" &&
    Object.prototype.hasOwnProperty.call(externals, dependency.request)
) {
    return handleExternal(externals[dependency.request], callback);
}
callback();
};
...

callback(null, new ExternalModule('react', undefined || globalType, 'react'));

if (options.externals) {
    ExternalsPlugin = require('./ExternalsPlugin');
    new ExternalsPlugin(
        options.output.libraryTarget,
        // 当设置了externals后，会添加一个ExternalsPlugin，而它的type默认为output.libraryTarget, 
        // 而libraryTarget默认为'var',这里是一个伏笔，后面会提到
        options.externals
    ).apply(compiler);
}

externals: function(context, request, callback) {
      if (/^yourregex$/.test(request)) {
        return callback(null, 'commonjs ' + request)
      }
      callback()
    },

(err, value, type) => {
    if (err) return callback(err);
    if (value !== undefined) {
        handleExternal(value, type, callback);
    } else {
        callback();
    }
};

externals: {
      // String
      react: 'react',
      // Object
      lodash: {
        commonjs: 'lodash',
        amd: 'lodash',
        root: '_' // indicates global variable
      },
      // Array
      subtract: ['./math', 'subtract']
    },

//lib/ExternalModule.js
switch (this.externalType) {
			case "this":
			case "window":
			case "self":
				...
			case "global":
				...
			case "commonjs":
			case "commonjs2":
				...
			case "amd":
			case "amd-require":
			case "umd":
			case "umd2":
        ...
			default:
				...
		}

getSourceForDefaultCase(optional, request) {
    ...
// request参数代入我们的['./math', 'subtract']，
// 可得最后return的值为module.exports = ./math["subtract"]，
// 可以看出数组的第一个参数是作为模块名或者变量名，后面的参数作为对象的属性，一层层获取的。
// 然后就是var的情况./math["subtract"]，显然是不合法的。
// 如果是commonjs的话，就是require('./math')["subtract"],这个代入getSourceForCommonJsExternal可以知道。
    const variableName = request[0];
		const objectLookup = request
			.slice(1)
			.map(r => `[${JSON.stringify(r)}]`)
            .join("");
        //e.g.输出格式module.exports = some["thing"];
    return `${missingModuleError}module.exports = ${variableName}${objectLookup};`;
    }

const a = 'nowyouseeme'
const b = 'cuzletitbe'
const lenA = a.length
const lenB = b.length

const matrix = Array.from({
  length: lenB + 1
}).map(() => new Array(lenA + 1).fill(0))

let i
for (i = 1; i < lenB + 1; i++) {
  matrix[i][0] = -1 * i
}
let j
for (j = 1; j < lenA + 1; j++) {
  matrix[0][j] = -1 * j
}

let match = 1 // 当前行对应的字符等于当前列对应的字符时的得分，这个值只能与左上格数值相加
let dismatch = -3 // 当前行对应的字符不等于当前列对应的字符时的得分， 这个值只能与左上格数值相加
let gap = -1 // 不管相等还是不相等，默认都加在上格或者左格进行最大值判定
/*
例如比较上面两个字符串的第一个字符
|   |   | n |
-------------
|   | 0 |-1 |
-------------
| c |-1 |-1 |
因为第一个字符不相等所以 
matrix[1][1] = Math.max(matrix[0][0] - 3, matrix[0][1] -1, matrix[1][0] -1) // 1
*/

for (i = 1; i < lenB + 1; i++) {
  for (j = 1; j < lenA + 1; j++) {
    const scoreFromTopLeft = a[j - 1] === b[i - 1] ? match : dismatch
    matrix[i][j] = Math.max(
      matrix[i - 1][j - 1] + scoreFromTopLeft,
      matrix[i - 1][j] + gap,
      matrix[i][j - 1] - gap
    )
    //下面这个链接的会把这个最大值是取自哪个这个信息给存到traceback_type_status这个二维数组里面
    //方便回溯的时候知道上一步来自哪个方向,当然也可以不存，在回溯的时候再判断
    // const intermediate_scores = [matrix[i - 1][j - 1] + scoreFromTopLeft, matrix[i - 1][j] + gap,matrix[i][j - 1] - gap]
    // const tracebackTypeStatus = intermediate_scores.map((e, i) => e === score);
  }
}

while (current) {
  pos = current.pos
  alignment = current.alignment
  // Get children alignments
  children = this.alignmentChildren(current.pos)
  // Store completed alignments
  if (!children.length) {
    final_alignments.push(alignment)
  }
  current = current.next
  for (t = 0, len = children.length; t < len; t++) {
    child = children[t]
    child.alignment = {
      seq1: alignment.seq1.concat(
        child.tracebackType === 0 ? '-' : this.seq1[pos[0] - 1]
      ), // -1 refers to offset between  scoring matrix and the sequence
      seq2: alignment.seq2.concat(
        child.tracebackType === 2 ? '-' : this.seq2[pos[1] - 1]
      )
    }
    // Move down a layer
    child.next = current
    current = child
  }
}

(function() {
  const Dep = (function() {
      let uid = 0
      class Dep {
          constructor() {
              this.id = uid++
              this.subs = new Set()
          }
          depend() {
              if (Dep.target) {
                  Dep.target.addDep(this)
              }
          }

          removeSub(sub) {
              this.subs.delete(sub)
          }

          addSub(sub) {
              this.subs.add(sub)
          }

          notify() {
              this.subs.forEach(function(sub) {
                  sub.update()
              })
          }
      }
      Dep.target = null
      return Dep
  }
  )()

  function parsePath(exp) {
      const path = exp.split('.')
      return function(vm) {
          return path.reduce(function(result, property) {
              return result[property]
          }, vm)
      }
  }

  const Watcher = (function() {
      let uid = 0
      class Watcher {
          constructor(vm, expOrFn, cb) {
              this.id = uid++
              this.vm = vm
              this.cb = cb
              this.newDeps = new Map()
              this.deps = new Map()
              this.getter = parsePath(expOrFn)
              this.value = this.get()
          }

          get() {
              Dep.target = this
              let value
              const vm = this.vm
              value = this.getter.call(vm, vm)
              Dep.target = null
              this.cleanupDeps()
          }

          addDep(dep) {
              console.log(this.newDeps)
              const id = dep.id
              if (!this.newDeps.has(id)) {
                  this.newDeps.set(id, dep)
                  if (!this.deps.has(id)) {
                      dep.addSub(this)
                  }
              }
          }

          cleanupDeps() {
              this.deps.forEach((dep)=>{
                  if (!this.newDeps.has(dep.id)) {
                      dep.removeSub(this)
                  }
              }
              );
              let nextDeps = this.newDeps
              this.newDeps = this.deps
              this.deps = nextDeps
              this.newDeps.clear()
          }

          update() {
              const oldValue = this.value
              this.value = this.get()
              this.cb.call(this.vm, this.value, oldValue)
          }
      }
      return Watcher
  }
  )()
  const Observer = (function() {
      const arrayProto = Array.prototype
      const methodToPatch = ['push', 'pop', 'splice', 'shift', 'unshift']
      const arrayMethods = Object.create(arrayProto)
      methodToPatch.forEach(function(method) {
          const original = arrayProto[method]
          Object.defineProperty(arrayMethods, method, {
              value: function() {
                  const result = original.apply(this, args)
                  const ob = this.__ob__
                  let inserted
                  switch (method) {
                  case 'push':
                  case 'unshift':
                      inserted = args
                      break
                  case 'splice':
                      inserted = args.slice(2)
                      break
                  }
                  if (inserted)
                      ob.observeArray(inserted)
                  ob.dep.notify()
                  return result
              },
              enumerable: false
          })
      })
      function observe(value) {
          if (typeof value !== 'object')
              return
          let ob
          if (value.hasOwnProperty('__ob__')) {
              ob = value.__ob__
          } else {
              ob = new Observer(value)
          }
          return ob
      }
      class Observer {
          constructor(value) {
              this.value = value
              this.dep = new Dep()
              Object.defineProperty(value, '__ob__', {
                  value: this,
                  enumerable: false
              })
              if (Array.isArray(value)) {
                  copyAugment(value, arrayMethods, methodToPatch)
                  this.observeArray(value)
              } else {
                  this.walk(value)
              }
          }
          walk(obj) {
              const keys = Object.keys(obj)
              for (let i = 0; i < keys.length; i++) {
                  defineReactive(obj, keys[i])
              }
          }

          observeArray(items) {
              for (let i = 0, l = items.length; i < l; i++) {
                  observe(items)
              }
          }
      }
      function copyAugment(target, src, keys) {
          keys.forEach(function(key) {
              Object.defineProperty(target, key, {
                  value: src[k],
                  enumerable: false
              })
          })
      }
      function defineReactive(obj, key) {
          const dep = new Dep()
          const property = Object.getOwnPropertyDescriptor(obj, key)
          if (property) {
              const {getter, setter} = property
              let val
              if (!getter || setter) {
                  val = obj[key]
              }
              let childOb = observe(val)
              Object.defineProperty(obj, key, {
                  get: function() {
                      const value = getter ? getter.call(obj) : val
                      if (Dep.target) {
                          dep.depend()
                          if (childOb) {
                              childOb.dep.depend()
                              if (Array.isArray(value)) {
                                  dependArray(value)
                              }
                          }
                      }
                      return value
                  },
                  set: function(newVal) {
                      const value = getter ? getter.call(obj) : val
                      if (value === newVal) {
                          return
                      }
                      if (getter && !setter)
                          return
                      if (setter) {
                          setter.call(obj, newVal)
                      } else {
                          val = newVal
                      }
                      childOb = observe(newVal)
                      dep.notify()
                  }
              })
          }
      }
      function dependArray(value) {
          for (let e, i = 0, l = value.length; i < l; i++) {
              e = value[i]
              e && e.__ob__ && e.__ob__.dep.depend()
              if (Array.isArray(e)) {
                  dependArray(e)
              }
          }
      }
      return Observer
  }
  )()

  let a = {
      b: 2
  }
  new Observer(a)
  console.log(a)
  new Watcher(a,'b',function(newVal) {
      console.log('观测到更新')
  }
  )
  new Watcher(a,'b',function(newVal) {
      console.log('我也观测到更新')
  }
  )
  a.b = 3
}
)()

/* 以下为babel-plugin-transform-remove-console的部分源码
    插件export的是一个接收当前babel对象的函数，这里他取这个对象的types属性，这个types属性出自于@babel/types，
    在这里用于创建AST节点替换原来的节点。
    函数返回一个对象，对象比较重要的属性是visitor。用来定义当遍历访问到某类节点时，需要进行的用户自定义的操作。
    节点的类型可以很简单地在AST Explorer中书写代码，通过显示的解析后的AST树中获知。
*/
module.exports = function({ types: t }) {
  return {
    name: "transform-remove-console",
    visitor: {
      // CallExpression表示函数调用，这些vistor的函数接收两个参数第一个是NodePath的对象
      // 另一个是用于缓存遍历数据的参数state
      // 便于用户在访问节点时存储自己需要的信息
      CallExpression(path, state) {
        const callee = path.get("callee");
        // NodePath通过get方法，获得对应的子Path，注意返回的也是一个NodePath的对象，并非是节点本身
        // Node可以通过NodePath.node获取，NodePath除了存储当前的Node以外,还保存节点的层级结构
        // 如通过Path.getSibling(index) 获取nth的当前层级的NodePath;
        // path.parentPath 获父NodePath
        // 另外所有替换删除的操作都是在NodePath上进行

        // NodePath有一系列is开头的方法，用于确认Path是否为某种类型
        if (!callee.isMemberExpression()) return;

        if (isIncludedConsole(callee, state.opts.exclude)) {
          // console.log()
          if (path.parentPath.isExpressionStatement()) {
            path.remove(); // 删除Path
          } else {
            path.replaceWith(createVoid0());
            // 用一个新的NodePath代替原来的NodePath
            // NodePath一般用上面的types参数以types.UnaryExpression等
            // types后接NodePath type的构造方法创建
            // 如这里的createVoid0就是以types.UnaryExpression('void', [0])构造的
          }
        } else if (isIncludedConsoleBind(callee, state.opts.exclude)) {
          // console.log.bind()
          path.replaceWith(createNoop());
        }
      },
      MemberExpression: {
        // 访问节点有两个阶段一个是enter、一个exit，默认是enter
        // 访问结束发生该节点下的子节点遍历完返回时
        exit(path, state) {
          if (
            isIncludedConsole(path, state.opts.exclude) &&
            !path.parentPath.isMemberExpression()
          ) {
            if (
              path.parentPath.isAssignmentExpression() &&
              path.parentKey === "left"
            ) {
              path.parentPath.get("right").replaceWith(createNoop());
            } else {
              path.replaceWith(createNoop());
            }
          }
        }
      }
    }
  };
  // 值得一提的是在这个插件加了一个验证console是否为全局的操作
    function isGlobalConsoleId(id) {
    const name = "console";
    // 首先通过scope.getBinding确认console是否是为用户定义的，其次再验证在全局作用域中是否有console定义
    return (
      id.isIdentifier({ name }) &&
      !id.scope.getBinding(name) &&
      id.scope.hasGlobal(name)
    );
  }
  //ps: 一个小的发现在visitor函数中this等于参数state