首页 » 前端开发 » 正文

Webpack的node.js API文档【译文】

写在前面

为了方便后期查阅资料,所以打算直接把官方文档翻译一遍放在此处,官方文档请参考附录一。限本人英语翻译水平有限,如果有觉得翻译不恰当的甚至有翻译错误的,欢迎留言指正,谢谢。

此篇文章的最后翻译时间是2016.09.04。

同时已经翻译的的其他两篇分别是

为了方便阅读,注意以下几种格式:

  • 这个格式表示的是webpack提供的API,它至少对应了一个小标题。
  • 关于默认值及一些提示信息采用这种方式

    Default:0

  • 举例的代码格式如下:
module.exports = {
    // code
};

下面开始正文。

简单方法

var webpack = require("webpack");

// returns a Compiler instance
webpack({
    // configuration
}, function(err, stats) {
    // ...
});

 

复杂方法

var webpack = require("webpack");

// returns a Compiler instance
var compiler = webpack({
    // configuration
});

compiler.run(function(err, stats) {
    // ...
});
// or
compiler.watch({ // watch options:
    aggregateTimeout: 300, // wait so long for more changes
    poll: true // use polling instead of native watchers
    // pass a number to set the polling interval
}, function(err, stats) {
    // ...
});

 

Compiler

一个Compiler的实例有以下方法

compiler.run(callback) – 构建bundle。

  • callback(err, stats) – 构建完成后的回调函数。

var watcher = compiler.watch(watchOptions, handler) – 构建bundle,然后启动监听器(watcher),监听器的作用是在源文件变更时重新构建bundle。返回一个Watching实例。注意,因为这会自动运行一个初始构建,所以你只需要运行watch(不要运行run)。

  • watchOptions
    • watchOptions.aggregateTimeout – 过多少毫秒数再检查变更。默认是300.
    • watchOptions.poll – 监听器使用轮询而不是原生监听器(native watchers)。true表示使用默认间隔数(300毫秒)。默认值:undefined(自动)。
  • handler(err, stats) – 构建完成或失败/警告发生后的回调。(注意handler会被调用多次,即使在同一个bundle中handler被调用多次也会发生,在这种情况下webpack并不保证每次调用时都是修改和重构)

Watching

一个Watching的实例拥有以下方法:

watcher.close(callback) – 停止监听

  • callback – 停止监听时的回调函数。

stats

Stats对象导出以下方法:

stats.hasErrors()

当编译时有错误发生将返回true。

stats.hasWarnings()

当编译时有警告发生将返回true。

stats.toJson(options)

作为JSON对象返回信息。

以下是一些不同的log打印等级,通过options传递(比如stats.toJson(“verbose”)):

"none" (或false) 不输出

"errors-only" 只有当错误发生时输出

"minimal" 只有当错误或一个新的编译(compilation )出现时输出

"normal" (或true) 标准输出

"verbose" 输出所有webpack拥有的信息

如果要有更精细的控制,可以通过布尔值设置以下选项:

options.context (字符串) 对请求的简短的内容目录

options.hash 添加编译的hash值

options.version 添加webpack版本信息

options.timings 添加耗时信息

options.assets 添加资源信息

options.chunks 添加分块信息 (将这项设置成 false 将会导致较少的详细输出)

options.chunkModules 添加构建模块信息到分块信息中

options.modules 添加构建模块信息

options.children 添加子节点(children )信息

options.cached  添加缓存(但是没有构建)的模块信息

options.reasons 添加模块为什么被包含的原因信息

options.source 添加模块的源码

options.errorDetails 添加详细错误信息(类似于log解析)

options.chunkOrigins 添加原始分块和块合并信息

options.modulesSort (字符串)通过字段排序模块

options.chunksSort (字符串) 通过字段排序分块

options.assetsSort (字符串) 通过字段排序资源

这里有一个输出的 JSON结果的实例

注意:如果你想要在生成的HTML页面上提取资源名,请使用assetsByChunkName属性,这个属性包含了一个映射chunkName 到资源名的对象(字符串或者字符串数组)。

stats.toString(options)

返回一个格式化的字符串结果。

options 和toJsonoptions 参数设置相同。

options.colors 表示带上控制台颜色

以下是一个stats.toString使用的例子:

var webpack = require("webpack");
webpack({
    // configuration
}, function(err, stats) {
        if (err) { throw new gutil.PluginError('webpack:build', err); }
        gutil.log('[webpack:build]', stats.toString({
            chunks: false, // Makes the build much quieter
            colors: true
        }));
});

error handling

使用node.js API处理所有的错误和警告,你需要测试err, stats.errors 和stats.warnings:

var webpack = require("webpack");
webpack({
    // configuration
}, function(err, stats) {
    if(err)
        return handleFatalError(err);
    var jsonStats = stats.toJson();
    if(jsonStats.errors.length > 0)
        return handleSoftErrors(jsonStats.errors);
    if(jsonStats.warnings.length > 0)
        handleWarnings(jsonStats.warnings);
    successfullyCompiled();
});

compile to memory

var MemoryFS = require("memory-fs");
var webpack = require("webpack");

var fs = new MemoryFS();
var compiler = webpack({ ... });
compiler.outputFileSystem = fs;
compiler.run(function(err, stats) {
  // ...
  var fileContent = fs.readFileSync("...");
});

附录

本文共 2 个回复

发表评论