// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
  loader: require.resolve('url-loader'),
  options: {
    limit: 10000,
    name: 'static/media/[name].[hash:8].[ext]',
  },
},

- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png

import { cube } from './math.js';

console.log(cube(5));

// 不打包 square
export class square {
  constructor() {
    console.log('square');
  }
}

export class cube {
  constructor(x) {
    return x * x * x;
  }
}

// babel 编译后，同不打包
'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});
exports.cube = cube;

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError('Cannot call a class as a function');
  }
}

var square = (exports.square = function square() {
  _classCallCheck(this, square);

  console.log('square');
});

function cube(x) {
  console.log('cube');
  return x * x * x;
}

// 不打包
export function square(x) {
  console.log('square');
  return x.a;
}

export function cube(x) {
  return x * x * x;
}

// wow 被打包
export function square() {
  console.log('square');
  return x.a;
}

square({ a: 1 });

export function cube() {
  return x * x * x;
}

// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
new webpack.DefinePlugin(env.stringified)

process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js';

import _ from 'lodash';

function component() {
  var element = document.createElement('div');
  var button = document.createElement('button');
  var br = document.createElement('br');

  button.innerHTML = 'Click me and look at the console!';
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.appendChild(br);
  element.appendChild(button);

  // Note that because a network request is involved, some indication
  // of loading would need to be shown in a production-level site/app.
  button.onclick = (e) =>
    import(/* webpackChunkName: "print" */ './print').then((module) => {
      var print = module.default;

      print();
    });

  return element;
}

document.body.appendChild(component());

import Print from './print';

{
  "browserslist": ["last 1 version", "> 1%", "maintained node versions", "not dead"]
}

webpack --env.NODE_ENV=local --env.production --progress

const { SyncHook } = require('tapable');

// 创建一个同步 Hook，指定参数
const hook = new SyncHook(['arg1', 'arg2']);

// 注册
hook.tap('a', function(arg1, arg2) {
  console.log('a');
});

hook.tap('b', function(arg1, arg2) {
  console.log('b');
});

hook.call(1, 2);

x.hooks.拆分模块的Hook.tap('A', () => {
  if (A 判断条件满足) {
    return true
  }
})
x.hooks.拆分模块的Hook.tap('B', () => {
  if (B 判断条件满足) {
    return true
  }
})
x.hooks.拆分模块的Hook.tap('C', () => {
  if (C 判断条件满足) {
    return true
  }
})

x.hooks.tap('A', (data) => {
  if (满足 A 需要处理的条件) {
    // 处理数据 data
    return data
  } else {
    return
  }
})
x.hooks.tap('B', (data) => {
  if (满足B需要处理的条件) {
    // 处理数据 data
    return data
  } else {
    return
  }
})
x.hooks.tap('C', (data) => {
  if (满足 C 需要处理的条件) {
    // 处理数据 data
    return data
  } else {
    return
  }
})

const hook = new SyncHook(['arg1', 'arg2']);

class SyncHook extends Hook {
  // 错误处理，防止调用者调用异步钩子
  tapAsync() {
    throw new Error('tapAsync is not supported on a SyncHook');
  }
  // 错误处理，防止调用者调用 promise 钩子
  tapPromise() {
    throw new Error('tapPromise is not supported on a SyncHook');
  }
  // 核心实现
  compile(options) {
    factory.setup(this, options);
    return factory.create(options);
  }
}

// 变量的初始化
constructor(args) {
 if (!Array.isArray(args)) args = [];
 this._args = args;
 this.taps = [];
 this.interceptors = [];
 this.call = this._call;
 this.promise = this._promise;
 this.callAsync = this._callAsync;
 this._x = undefined;
}

// 注册
hook.tap('a', function(arg1, arg2) {
  console.log('a');
});

hook.tap('b', function(arg1, arg2) {
  console.log('b');
});

tap(options, fn) {
    // 参数处理
 if (typeof options === "string") options = { name: options };
 if (typeof options !== "object" || options === null)
  throw new Error(
   "Invalid arguments to tap(options: Object, fn: function)"
  );
 options = Object.assign({ type: "sync", fn: fn }, options);
 if (typeof options.name !== "string" || options.name === "")
  throw new Error("Missing name for tap");
 // 执行拦截器的 register 函数， 比较简单不分析
 options = this._runRegisterInterceptors(options);
 // 处理注册事件
 this._insert(options);
}

_insert(item) {
    // 重置所有的 调用 方法
 this._resetCompilation();
 // 将注册事件排序后放进taps数组
 let before;
 if (typeof item.before === "string") before = new Set([item.before]);
 else if (Array.isArray(item.before)) {
  before = new Set(item.before);
 }
 let stage = 0;
 if (typeof item.stage === "number") stage = item.stage;
 let i = this.taps.length;
 while (i > 0) {
  i--;
  const x = this.taps[i];
  this.taps[i + 1] = x;
  const xStage = x.stage || 0;
  if (before) {
   if (before.has(x.name)) {
    before.delete(x.name);
    continue;
   }
   if (before.size > 0) {
    continue;
   }
  }
  if (xStage > stage) {
   continue;
  }
  i++;
  break;
 }
 this.taps[i] = item;
}

hook.call(1, 2); // 触发函数

this.call = this._call;

Object.defineProperties(Hook.prototype, {
  _call: {
    value: createCompileDelegate('call', 'sync'),
    configurable: true,
    writable: true
  },
  _promise: {
    value: createCompileDelegate('promise', 'promise'),
    configurable: true,
    writable: true
  },
  _callAsync: {
    value: createCompileDelegate('callAsync', 'async'),
    configurable: true,
    writable: true
  }
});

function createCompileDelegate(name, type) {
  return function lazyCompileHook(...args) {
    this[name] = this._createCall(type);
    return this[name](...args);
  };
}

_createCall(type) {
 return this.compile({
  taps: this.taps,
  interceptors: this.interceptors,
  args: this._args,
  type: type
 });
}
compile(options) {
 throw new Error("Abstract: should be overriden");
}

class SyncHookCodeFactory extends HookCodeFactory {
  content({ onError, onResult, onDone, rethrowIfPossible }) {
    return this.callTapsSeries({
      onError: (i, err) => onError(err),
      onDone,
      rethrowIfPossible
    });
  }
}

const factory = new SyncHookCodeFactory();

class SyncHook extends Hook {
  compile(options) {
    factory.setup(this, options);
    return factory.create(options);
  }
}

setup(instance, options) {
  // 这里的 instance 是 syncHook 实例, 其实就是把 tap 进来的钩子数组给到钩子的 _x 属性里.
  instance._x = options.taps.map(t => t.fn);
}

create(options) {
  // 初始化参数，保存 options 到本对象 this.options，保存 new Hook(["options"]) 传入的参数到 this._args
  this.init(options);
  let fn;
  // 动态构建钩子，这里是抽象层，分同步、异步、promise
  switch (this.options.type) {
    // 先看同步
    case "sync":
      // 动态返回一个钩子函数
      fn = new Function(
        // 生成函数的参数 no before no after 返回参数字符串 xxx,xxx 在
        // 注意这里 this.args 返回的是一个字符串,
        // 在这个例子中是 options
        this.args(),
        '"use strict";\n' +
          this.header() +
          this.content({
            onError: err => `throw ${err};\n`,
            onResult: result => `return ${result};\n`,
            onDone: () => "",
            rethrowIfPossible: true
          })
      );
      break;
    case "async":
      fn = new Function(
        this.args({
          after: "_callback"
        }),
        '"use strict";\n' +
          this.header() +
          // 这个 content 调用的是子类类的 content 函数,
          // 参数由子类传,实际返回的是 this.callTapsSeries() 返回的类容
          this.content({
            onError: err => `_callback(${err});\n`,
            onResult: result => `_callback(null, ${result});\n`,
            onDone: () => "_callback();\n"
          })
      );
      break;
    case "promise":
      let code = "";
      code += '"use strict";\n';
      code += "return new Promise((_resolve, _reject) => {\n";
      code += "var _sync = true;\n";
      code += this.header();
      code += this.content({
        onError: err => {
          let code = "";
          code += "if(_sync)\n";
          code += `_resolve(Promise.resolve().then(() => { throw ${err}; }));\n`;
          code += "else\n";
          code += `_reject(${err});\n`;
          return code;
        },
        onResult: result => `_resolve(${result});\n`,
        onDone: () => "_resolve();\n"
      });
      code += "_sync = false;\n";
      code += "});\n";
      fn = new Function(this.args(), code);
      break;
  }
  // 把刚才 init 赋的值初始化为 undefined
  // this.options = undefined;
  // this._args = undefined;
  this.deinit();

  return fn;
}

"use strict";
function (options) {
  var _context;
  var _x = this._x;
  var _taps = this.taps;
  var _interterceptors = this.interceptors;
  // 我们只有一个拦截器所以下面的只会生成一个
  _interceptors[0].call(options);

  var _tap0 = _taps[0];
  _interceptors[0].tap(_tap0);
  var _fn0 = _x[0];
  _fn0(options);
  var _tap1 = _taps[1];
  _interceptors[1].tap(_tap1);
  var _fn1 = _x[1];
  _fn1(options);
  var _tap2 = _taps[2];
  _interceptors[2].tap(_tap2);
  var _fn2 = _x[2];
  _fn2(options);
  var _tap3 = _taps[3];
  _interceptors[3].tap(_tap3);
  var _fn3 = _x[3];
  _fn3(options);
}

class Compiler extends Tapable {
  constructor(context) {
    super();
    this.hooks = {
      /** @type {SyncBailHook<Compilation>} */
      shouldEmit: new SyncBailHook(['compilation']),
      /** @type {AsyncSeriesHook<Stats>} */
      done: new AsyncSeriesHook(['stats']),
      /** @type {AsyncSeriesHook<>} */
      additionalPass: new AsyncSeriesHook([])
      /** @type {AsyncSeriesHook<Compiler>} */
    };
  }
}

compiler.hooks.compile.tapAsync('afterCompile', (compilation, callback) => {
  console.log('This is an example plugin!');
  console.log('Here’s the `compilation` object which represents a single build of assets:', compilation);

  // 使用 webpack 提供的 plugin API 操作构建结果
  compilation.addModule(/* ... */);

  callback();
});

class Compilation extends Tapable {
  /**
   * Creates an instance of Compilation.
   * @param {Compiler} compiler the compiler which created the compilation
   */
  constructor(compiler) {
    super();
    this.hooks = {
      /** @type {SyncHook<Module>} */
      buildModule: new SyncHook(['module']),
      /** @type {SyncHook<Module>} */
      rebuildModule: new SyncHook(['module']),
      /** @type {SyncHook<Module, Error>} */
      failedModule: new SyncHook(['module', 'error']),
      /** @type {SyncHook<Module>} */
      succeedModule: new SyncHook(['module']),

      /** @type {SyncHook<Dependency, string>} */
      addEntry: new SyncHook(['entry', 'name'])
      /** @type {SyncHook<Dependency, string, Error>} */
    };
  }
}

class MyExampleWebpackPlugin {
  // 定义 `apply` 方法
  apply(compiler) {
    // 指定要追加的事件钩子函数
    compiler.hooks.compile.tapAsync('afterCompile', (compilation, callback) => {
      console.log('This is an example plugin!');
      console.log('Here’s the `compilation` object which represents a single build of assets:', compilation);

      // 使用 webpack 提供的 plugin API 操作构建结果
      compilation.addModule(/* ... */);

      callback();
    });
  }
}

function build(previousFileSizes) {
  let compiler = webpack(config);
  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      // ...
    });
  });
}

const webpack = (options, callback) => {
  let compiler;
  // 处理多个入口
  if (Array.isArray(options)) {
    compiler = new MultiCompiler(options.map((options) => webpack(options)));
  } else if (typeof options === 'object') {
    // webpack 的默认参数
    options = new WebpackOptionsDefaulter().process(options);
    console.log(options); // 见下图
    // 实例化 compiler
    compiler = new Compiler(options.context);
    compiler.options = options;
    // 对 webpack 的运行环境处理
    new NodeEnvironmentPlugin().apply(compiler);
    // 根据上篇的 tabpable 可知，这里是为了注册插件
    if (options.plugins && Array.isArray(options.plugins)) {
      for (const plugin of options.plugins) {
        plugin.apply(compiler);
      }
    }
    // 触发两个事件点 environment/afterEnviroment
    compiler.hooks.environment.call();
    compiler.hooks.afterEnvironment.call();
    // 设置 compiler 的属性并调用默认配置的插件，同时触发事件点 entry-option
    compiler.options = new WebpackOptionsApply().process(options, compiler);
  } else {
    throw new Error('Invalid argument: options');
  }
  if (callback) {
    compiler.run(callback);
  }
  return compiler;
};

function process(options, compiler) {
  let ExternalsPlugin;
  compiler.outputPath = options.output.path;
  compiler.recordsInputPath = options.recordsInputPath || options.recordsPath;
  compiler.recordsOutputPath = options.recordsOutputPath || options.recordsPath;
  compiler.name = options.name;
  compiler.dependencies = options.dependencies;
  if (typeof options.target === 'string') {
    let JsonpTemplatePlugin;
    let FetchCompileWasmTemplatePlugin;
    let ReadFileCompileWasmTemplatePlugin;
    let NodeSourcePlugin;
    let NodeTargetPlugin;
    let NodeTemplatePlugin;

    switch (options.target) {
      case 'web':
        JsonpTemplatePlugin = require('./web/JsonpTemplatePlugin');
        FetchCompileWasmTemplatePlugin = require('./web/FetchCompileWasmTemplatePlugin');
        NodeSourcePlugin = require('./node/NodeSourcePlugin');
        new JsonpTemplatePlugin().apply(compiler);
        new FetchCompileWasmTemplatePlugin({
          mangleImports: options.optimization.mangleWasmImports
        }).apply(compiler);
        new FunctionModulePlugin().apply(compiler);
        new NodeSourcePlugin(options.node).apply(compiler);
        new LoaderTargetPlugin(options.target).apply(compiler);
        break;
      case 'webworker':
        // ...
        break;
    }
    // ...
  }
  new JavascriptModulesPlugin().apply(compiler);
  new JsonModulesPlugin().apply(compiler);
  new WebAssemblyModulesPlugin({
    mangleImports: options.optimization.mangleWasmImports
  }).apply(compiler);

  new EntryOptionPlugin().apply(compiler);
  // 触发事件点 entry-options 并传入参数 context 和 entry
  compiler.hooks.entryOption.call(options.context, options.entry);
  new CompatibilityPlugin().apply(compiler);
  // ...
  new ImportPlugin(options.module).apply(compiler);
  new SystemPlugin(options.module).apply(compiler);
}

function run(callback) {
  if (this.running) return callback(new ConcurrentCompilationError());
  const finalCallback = (err, stats) => {
    // ......
  };
  this.running = true;

  const onCompiled = (err, compilation) => {
    // ....
  };

  this.hooks.beforeRun.callAsync(this, (err) => {
    if (err) return finalCallback(err);

    this.hooks.run.callAsync(this, (err) => {
      if (err) return finalCallback(err);

      this.readRecords((err) => {
        if (err) return finalCallback(err);

        this.compile(onCompiled);
      });
    });
  });
}

function compile(callback) {
  const params = this.newCompilationParams();
  // 触发事件点 beforeCompile，并传入参数 CompilationParams
  this.hooks.beforeCompile.callAsync(params, (err) => {
    if (err) return callback(err);
    // 触发事件点 compile，并传入参数 CompilationParams
    this.hooks.compile.call(params);
    // 实例化 compilation
    const compilation = this.newCompilation(params);
    // 触发事件点 make
    this.hooks.make.callAsync(compilation, (err) => {
      // ....
    });
  });
}

function newCompilationParams() {
  const params = {
    normalModuleFactory: this.createNormalModuleFactory(),
    contextModuleFactory: this.createContextModuleFactory(),
    compilationDependencies: new Set()
  };
  return params;
}

function createCompilation() {
  return new Compilation(this);
}
function newCompilation(params) {
  const compilation = this.createCompilation();
  compilation.fileTimestamps = this.fileTimestamps;
  compilation.contextTimestamps = this.contextTimestamps;
  compilation.name = this.name;
  compilation.records = this.records;
  compilation.compilationDependencies = params.compilationDependencies;
  // 触发事件点 thisCompilation 和 compilation， 同时传入参数 compilation 和 params
  this.hooks.thisCompilation.call(compilation, params);
  this.hooks.compilation.call(compilation, params);
  return compilation;
}

function apply(compiler) {
  compiler.hooks.compilation.tap('SingleEntryPlugin', (compilation, { normalModuleFactory }) => {
    compilation.dependencyFactories.set(
      SingleEntryDependency,
      normalModuleFactory // 工厂函数，存在 compilation 的 dependencyFactories 集合
    );
  });

  compiler.hooks.make.tapAsync('SingleEntryPlugin', (compilation, callback) => {
    const { entry, name, context } = this;

    const dep = SingleEntryPlugin.createDependency(entry, name);
    // 进入到 addEntry
    compilation.addEntry(context, dep, name, callback);
  });
}

function _addModuleChain(context, dependency, onModule, callback) {
  // ......
  // 取出对应的Factory
  const Dep = /** @type {DepConstructor} */ (dependency.constructor);
  const moduleFactory = this.dependencyFactories.get(Dep);
  // ......
  this.semaphore.acquire(() => {
    moduleFactory.create(
      {
        contextInfo: {
          issuer: '',
          compiler: this.compiler.name
        },
        context: context,
        dependencies: [dependency]
      },
      (err, module) => {
        // ......
      }
    );
  });
}

this.buildModule(module, false, null, null, (err) => {
  // ......
  afterBuild();
});

function buildModule(module, optional, origin, dependencies, thisCallback) {
  // 处理回调函数
  let callbackList = this._buildingModules.get(module);
  if (callbackList) {
    callbackList.push(thisCallback);
    return;
  }
  this._buildingModules.set(module, (callbackList = [thisCallback]));

  const callback = (err) => {
    this._buildingModules.delete(module);
    for (const cb of callbackList) {
      cb(err);
    }
  };
  // 触发 buildModule 事件点
  this.hooks.buildModule.call(module);
  module.build(
    this.options,
    this,
    this.resolverFactory.get('normal', module.resolveOptions),
    this.inputFileSystem,
    (error) => {
      // ......
    }
  );
}

return this.doBuild(options, compilation, resolver, fs, (err) => {
  // 在 createLoaderContext 函数中触发事件 normal-module-loader
  const loaderContext = this.createLoaderContext(resolver, options, compilation, fs);
  // .....
  const handleParseResult = (result) => {
    this._lastSuccessfulBuildMeta = this.buildMeta;
    this._initBuildHash(compilation);
    return callback();
  };

  try {
    // 调用 parser.parse
    const result = this.parser.parse(
      this._ast || this._source.source(),
      {
        current: this,
        module: this,
        compilation: compilation,
        options: options
      },
      (err, result) => {
        if (err) {
          handleParseError(err);
        } else {
          handleParseResult(result);
        }
      }
    );
    if (result !== undefined) {
      // parse is sync
      handleParseResult(result);
    }
  } catch (e) {
    handleParseError(e);
  }
});

module.build(
  this.options,
  this,
  this.resolverFactory.get('normal', module.resolveOptions),
  this.inputFileSystem,
  (error) => {
    // ......
    触发了事件点succeedModule;
    this.hooks.succeedModule.call(module);
    return callback();
  }
);

this.buildModule(module, false, null, null, (err) => {
  // ......
  // 执行afterBuild
  afterBuild();
});

Compilation.prototype.addModuleDependencies = function(module, dependencies, bail, cacheGroup, recursive, callback) {
  // 根据依赖数组(dependencies)创建依赖模块对象
  var factories = [];
  for (var i = 0; i < dependencies.length; i++) {
    var factory = _this.dependencyFactories.get(dependencies[i][0].constructor);
    factories[i] = [factory, dependencies[i]];
  }
  // ...
  // 与当前模块构建步骤相同
};

function seal(callback) {
  // 触发事件点 seal
  this.hooks.seal.call();
  // 优化
  // ......
  this.hooks.afterOptimizeDependencies.call(this.modules);

  this.hooks.beforeChunks.call();
  // 生成 chunk
  for (const preparedEntrypoint of this._preparedEntrypoints) {
    const module = preparedEntrypoint.module;
    const name = preparedEntrypoint.name;
    // 整理每个 Module 和 chunk，每个 chunk 对应一个输出文件。
    const chunk = this.addChunk(name);
    const entrypoint = new Entrypoint(name);
    entrypoint.setRuntimeChunk(chunk);
    entrypoint.addOrigin(null, name, preparedEntrypoint.request);
    this.namedChunkGroups.set(name, entrypoint);
    this.entrypoints.set(name, entrypoint);
    this.chunkGroups.push(entrypoint);

    GraphHelpers.connectChunkGroupAndChunk(entrypoint, chunk);
    GraphHelpers.connectChunkAndModule(chunk, module);

    chunk.entryModule = module;
    chunk.name = name;

    this.assignDepth(module);
  }
  this.processDependenciesBlocksForChunkGroups(this.chunkGroups.slice());
  this.sortModules(this.modules);
  this.hooks.afterChunks.call(this.chunks);

  this.hooks.optimize.call();

  // ......
  this.hooks.afterOptimizeModules.call(this.modules);

  // ......
  this.hooks.afterOptimizeChunks.call(this.chunks, this.chunkGroups);

  this.hooks.optimizeTree.callAsync(this.chunks, this.modules, (err) => {
    // ......
    this.hooks.beforeChunkAssets.call();
    this.createChunkAssets(); // 生成对应的 Assets
    this.hooks.additionalAssets.callAsync(/* ... */);
  });
}

function createChunkAssets() {
  // ......
  // 遍历 chunk
  for (let i = 0; i < this.chunks.length; i++) {
    const chunk = this.chunks[i];
    chunk.files = [];
    let source;
    let file;
    let filenameTemplate;
    try {
      // 调用何种 Template
      const template = chunk.hasRuntime() ? this.mainTemplate : this.chunkTemplate;
      const manifest = template.getRenderManifest({
        chunk,
        hash: this.hash,
        fullHash: this.fullHash,
        outputOptions,
        moduleTemplates: this.moduleTemplates,
        dependencyTemplates: this.dependencyTemplates
      }); // [{ render(), filenameTemplate, pathOptions, identifier, hash }]
      for (const fileManifest of manifest) {
        // .....
      }
      // .....
      // 写入 assets 对象
      this.assets[file] = source;
      chunk.files.push(file);
      this.hooks.chunkAsset.call(chunk, file);
      alreadyWrittenFiles.set(file, {
        hash: usedHash,
        source,
        chunk
      });
    } catch (err) {
      // ......
    }
  }
}

MainTemplate.prototype.requireFn = '__webpack_require__';
MainTemplate.prototype.render = function(hash, chunk, moduleTemplate, dependencyTemplates) {
  var buf = [];
  // 每一个 module 都有一个 moduleId，在最后会替换。
  buf.push('function ' + this.requireFn + '(moduleId) {');
  buf.push(this.indent(this.applyPluginsWaterfall('require', '', chunk, hash)));
  buf.push('}');
  buf.push('');
  // ... // 其余封装操作
};