非常教程

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具有WebpackOptionsDefaulterWebpackOptionsApply专门设计用于提供所需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