非常教程

Webpack参考手册

接口 | API

编译器 | Compiler

该Compiler的WebPack的模块是创建通过的WebPack CLI或途经的所有选项编译实例的主引擎webpackAPI或的WebPack配置文件。

它是由webpackapi下输出的webpack.Compiler。

编译器由webpack通过实例化,然后调用该run方法来使用。以下是一个可以使用的例子Compiler。事实上,这与webpack本身如何使用它非常接近。

compiler-example

// Can be imported from webpack package
import {Compiler} from 'webpack';

// Create a new compiler instance
const compiler = new Compiler();

// Populate all required options
compiler.options = {...};

// Creating a plugin.
class LogPlugin {
  apply (compiler) {
    compiler.plugin('should-emit', compilation => {
      console.log('should I emit?');
      return true;
    })
  }
}

// Apply the compiler to the plugin
new LogPlugin().apply(compiler);

/* Add other supporting plugins */

// Callback to be executed after run is complete
const callback = (err, stats) => {
  console.log('Compiler has finished execution.');
  // Display stats...
};

// call run on the compiler along with the callback
compiler.run(callback);

这Compiler就是我们所说的Tapable实例。通过这个,我们的意思是它混合在一起Tapable来吸收功能来注册和调用插件本身。大多数面向用户的插件首先在注册表中注册Compiler。编译器的工作可以被压缩成以下亮点

  • 通常有一个编译器的主实例。可以创建子编译器来委派特定的任务。
  • 创建编译器的很多复杂性都是为它填充所有相关的选项。
  • webpack具有WebpackOptionsDefaulter并WebpackOptionsApply专门设计用于提供所需Compiler的所有初始数据。
  • 这Compiler最终只是一个执行最少的功能来保持生命周期运行的功能。它将所有的加载/捆绑/写入工作委托给各种插件。
  • new LogPlugin(args).apply(compiler)将插件注册到Compiler生命周期中的任何特定的挂钩事件。
  • 该Compiler暴露了run它的kickstart对所有的编译工作方法webpack。完成后,它应该调用传入callback函数。记录统计和错误的所有尾端工作都在此回调函数中完成。

观看

Compiler监视文件系统并重新编译为文件的支持“监视模式”更改。在监视模式下,编译器将发出附加事件“watch-run”,“watch-close”和“invalid”。这通常在开发过程中使用,通常在工具的引擎之下webpack-dev-server,这样开发人员不需要每次手动重新编译。

有关监视模式的更多详细信息,请参阅Node.js API文档或CLI监视选项。

MultiCompiler

该模块MultiCompiler允许webpack在单独的编译器中运行多个配置。如果optionswebpack的NodeJS api中的参数是一个选项数组,则webpack会应用单独的编译器并callback在每个编译器执行结束时调用该方法。

var webpack = require('webpack');

var config1 = {
  entry: './index1.js',
  output: {filename: 'bundle1.js'}
}
var config2 = {
  entry: './index2.js',
  output: {filename:'bundle2.js'}
}

webpack([config1, config2], (err, stats) => {
  process.stdout.write(stats.toString() + "\n");
})

事件挂钩

这是所有暴露的事件钩子的参考指南Compiler。

活动名称

原因

PARAMS

类型

入门选项

-

-

bailResult

后插件

设置完初始插件后

编译器

同步

之后,解析器

设置好解析器后

编译器

同步

环境

-

-

同步

经过环境

环境设置完成

-

同步

前运行

compiler.run()启动

编译器

异步

跑

在阅读记录之前

编译器

异步

观看运行

在开始之前开始编译之前

编译器

异步

正常模块工厂

创建一个NormalModuleFactory后

normalModuleFactory

同步

上下文模块厂

创建一个ContextModuleFactory后

contextModuleFactory

同步

之前编译

编译参数已创建

compilationParams

异步

编

在创建新编译之前

compilationParams

同步

这个编译

发布编译事件之前

汇编

同步

汇编

编译创建完成

汇编

同步

使

-

汇编

平行

之后编译

-

汇编

异步

应该-发射

此时可以返回true / false

汇编

bailResult

需要追加通

-

-

bailResult

发射

在释放资产以输出目录之前

汇编

异步

后发出

排放资产后输出目录

汇编

异步

DONE

完成编译

统计

同步

失败

编译失败

错误

同步

无效

在无效的手表编译后

文件名,更改时间

同步

观看关闭

停止手表编译后

-

同步

用法

这里是一个异步emit事件处理程序的例子:

compiler.plugin("emit", function(compilation, callback) {
  // Do something async...
  setTimeout(function() {
    console.log("Done with async work...");
    callback();
  }, 1000);
});
Webpack

webpack 是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。

主页 https://webpack.js.org/
源码 https://github.com/webpack/webpack
发布版本 3.8.1

Webpack目录

1.指南 | Guides
2.接口 | API
3.概念 | Concepts
4.组态 | Configuration
5.装载 | Loaders