编译 | Compilation

Compilation

编译实例从编译器即扩展compiler.compilation。它是需求图中所有对象的文字编辑。该对象可以访问所有模块及其依赖项（其中大部分是循环引用）。在编译阶段，模块被加载，密封，优化，分块，散列和恢复等。这将是编译操作的主要生命周期。

compiler.plugin("compilation", function(compilation) {
  // the main compilation instance
  // all subsequent methods are derived from compilation.plugin
}

normal-module-loader

正常的模块加载器是实际加载模块图形中所有模块的功能（逐个加载）。

compilation.plugin('normal-module-loader', function(loaderContext, module) {
  // this is where all the modules are loaded
  // one by one, no dependencies are created yet
}

seal

汇编的密封已经开始。

compilation.plugin('seal', function() {
  // you are not accepting any more modules
  // no arguments
}

optimize

优化编译。

compilation.plugin('optimize', function() {
  // webpack is begining the optimization phase
  // no arguments
}

optimize-tree(chunks, modules) 异步

树的异步优化。

compilation.plugin('optimize-tree', function(chunks, modules) {

}

optimize-modules(modules: Module[])

优化模块。

compilation.plugin('optimize-modules', function(modules) {
  // handle to the modules array during tree optimization
}

after-optimize-modules(modules: Module[])

优化模块已完成。

optimize-chunks(chunks: Chunk[])

优化块。

//optimize chunks may be run several times in a compilation

compilation.plugin('optimize-chunks', function(chunks) {
    // Unless you've specified multiple entries in your config
    // there's only one chunk at this point
    chunks.forEach(function (chunk) {
        // Chunks have circular references to their modules
        chunk.modules.forEach(function (module){
            // module.loaders, module.rawRequest, module.dependencies, etc.
        }
    }
}

after-optimize-chunks(chunks: Chunk[])

优化块已完成。

revive-modules(modules: Module[], records)

从记录中恢复模块信息。

optimize-module-order(modules: Module[])

按照重要性排序模块。第一个是最重要的模块。它会得到最小的ID。

optimize-module-ids(modules: Module[])

优化模块ID。

after-optimize-module-ids(modules: Module[])

优化模块ID已完成。

record-modules(modules: Module[], records)

将模块信息存储到记录中。

revive-chunks(chunks: Chunk[], records)

从记录中还原块信息。

optimize-chunk-order(chunks: Chunk[])

按重要性排序块。第一个是最重要的块。它会得到最小的ID。

optimize-chunk-ids(chunks: Chunk[])

优化块ID。

after-optimize-chunk-ids(chunks: Chunk[])

优化块ID已完成。

record-chunks(chunks: Chunk[], records)

将块信息存储到记录中。

before-hash

在编译散列之前。

after-hash

编译哈希后。

before-chunk-assets

在创建块资产之前。

additional-chunk-assets(chunks: Chunk[])

为块创建其他资产。

record(compilation, records)

将有关编译的信息存储到记录中

additional-assets 异步

为编译创建其他资产

这是一个下载图像的例子。

compiler.plugin('compilation', function(compilation) {
  compilation.plugin('additional-assets', function(callback) {
    download('https://img.shields.io/npm/v/webpack.svg', function(resp) {
      if(resp.status === 200) {
        compilation.assets['webpack-version.svg'] = toAsset(resp
        callback(
      } else {
        callback(new Error('[webpack-example-plugin] Unable to download the image')
      }
    })
  }
}

optimize-chunk-assets(chunks: Chunk[]) 异步

优化块的资产。

资产存储在其中this.assets，但并非全部都是块资产。A Chunk有一个属性files指向由该块创建的所有文件。额外的块资产被存储在this.additionalChunkAssets。

以下是一个简单地为每个块添加横幅的示例。

compilation.plugin("optimize-chunk-assets", function(chunks, callback) {
  chunks.forEach(function(chunk) {
    chunk.files.forEach(function(file) {
      compilation.assets[file] = new ConcatSource("\/**Sweet Banner**\/", "\n", compilation.assets[file]
    }
  }
  callback(
}

after-optimize-chunk-assets(chunks: Chunk[])

块资产已经优化。这里有一个来自@boopathi的示例插件，它输出到每个块的内容。

var PrintChunksPlugin = function() {};

PrintChunksPlugin.prototype.apply = function(compiler) {
  compiler.plugin('compilation', function(compilation, params) {
    compilation.plugin('after-optimize-chunk-assets', function(chunks) {
      console.log(chunks.map(function(c) {
        return {
          id: c.id,
          name: c.name,
          includes: c.modules.map(function(m) {
            return m.request;
          })
        };
      })
    }
  }
};

optimize-assets(assets: Object{name: Source}) 异步

优化所有资产。

资产存储在this.assets。

after-optimize-assets(assets: Object{name: Source})

资产已经优化。

build-module(module)

模块构建开始之前。

compilation.plugin('build-module', function(module){
  console.log('About to build: ', module
}

succeed-module(module)

模块已成功构建。

compilation.plugin('succeed-module', function(module){
  console.log('Successfully built: ', module
}

failed-module(module)

模块构建失败。

compilation.plugin('failed-module', function(module){
  console.log('Failed to build: ', module
}

module-asset(module, filename)

来自模块的资产已添加到编译中。

chunk-asset(chunk, filename)

来自块的资源被添加到编译中。