const webpack = require('webpack');
webpack({
}, (err, stats) => {
if (err || stats.hasErrors()) {
err
对象不包含编译错误,需要使用stats.hasErrors()
单独处理。err
对象只包含webpack相关的问题,例如配置错误等。
也可以为webpack函数提供一个配置数组,后续详解。
Compiler实例
如果不向webpack传入可执行的回调函数,它会返回一个webpack compiler实例。
可以通过手动执行它或者为它的构建时添加一个监听器。
Compiler实例提供了以下方法。
.run(callback)
.watch(watchOptions, handler)
通常仅会创建一个主要Compiler实例。Compiler基本上只是执行最低限度的功能,维持生命周期运行。其他加载、打包、写入工作都委托到注册的插件上。
Compiler实例上的hooks属性用于将插件注册到Compiler的生命周期中的钩子事件上。
webpack使用WebpackOptionsDefaulter
和WebpackOptionsApply
来配置Compiler实例和内置插件。
使用run方法启动所有编译工作。完成之后执行传入的callback函数。最终记录下来的stats和errors都在这个callback中获取。
这个API一次仅支持一次编译。不能并发编译。一次run或者watch,需要调用close等待其完成后才能再次执行run和watch。
执行(Run)
const webpack = require('webpack');
const compiler = webpack({
compiler.run((err, stats) => {
compiler.close((closeErr) => {
监听(Watching)
调用watch方法会出发webpack执行,一旦webpack检测到文件变更,就会重新执行编译。
该方法会返回一个Watching实例。
watch(watchOptions, callback);
const webpack = require('webpack');
const compiler = webpack({
const watching = compiler.watch({
aggregateTimeout: 300,
poll: undefined
}, (err, stats) => {
console.log(stats);
关闭Watching(Close Watching)
watch方法返回一个Watching实例,该实例暴露一个.close(callback)方法,调用其方法会结束监听。
watching.close((closeErr) => {
console.log('Watching Ended.');
不能在监听器关闭或者失效之前再次watch或run。
Invalidate Watching
使用watching.invalidate
可以手动使当前编译循环无效,但不会停止监听进程。
Stats对象
stats对象会被作为webpack()回调函数的第二个参数,可以通过它获取代码编译过程中的有用信息,比如:
错误和警告
module和chunk信息
webpack CLI正是基于这些信息在控制台展示输出。
stats对象暴露了以下方法。
stats.hasErrors()
用来检查编译期是否有错,返回值为boolean。
stats.hasWarnings()
stats.toJson(options)
以JSON对象形式返回编译信息。options可以是字符串或者对象。
stats.toJson('minimal');
stats.toJson({
assets: false,
hash: true,
stats.toString(options)
以格式化的字符串形式返回编译信息。
配置对象与toJson一致,额外增加一个
stats.toString({
colors: true,
用法示例。
const webpack = require('webpack');
webpack({
}, (err, stats) => {
if (err) {
console.error(err);
return;
console.log(stats.toString({
chunks: false,
colors: true
MultiCompiler
可以让webpack同时执行多个配置。传给webpack 的options参数是由多个配置对象构成的数组,webpack会相应地创建多个Compiler示例,并且在所有compiler执行完毕后,调用callback方法。
var webpack = require('webpack');
webpack([
{ entry: './index1.js', output: { filename: 'bundle1.js' } },
{ entry: './index2.js', output: { filename: 'bundle2.js' } }
], (err, stats) => {
process.stdout.write(stats.toString() + '\n');
多个配置对象在具体执行时不会并行执行。
错误处理(Error Handling)
完备的错误处理需要考虑以下三种类型的错误:
致命的webpack错误(配置出错)
覆盖这些场景的示例。
const webpack = require('webpack');
webpack({
}, (err, stats) => {
if (err) {
console.error(err.stack || err);
if (err.details) {
console.error(err.details);
return;
const info = stats.toJson();
if (stats.hasErrors()) {
console.error(info.errors);
if (stats.hasWarnings()) {
console.warn(info.warnings);
自定义文件系统(Custom File Systems)
默认情况下webpack使用普通文件系统来读取文件并写入。但是还可以使用不同类型的文件系统来更改。
改变inputFileSystem
或outputFileSystem
来实现。
例如,可以使用memfs
替换默认的outputFileSystem
,将文件写入到内存中。
const { createFsFromVolume, Volume } = require('memfs');
const webpack = require('webpack');
const fs = createFsFromVolume(new Volume());
const compiler = webpack({
compiler.outputFileSystem = fs;
compiler.run((err, stats) => {
const content = fs.readFileSync('...');
compiler.close((closeErr) => {
webpack-dev-server
及众多包依赖的webpack-dev-middleware
就是通过这种方式将文件放入内存中而不是磁盘中。
指定的输出文件系统需要兼容Node自身的fs模块接口。