Node.js API

Node.js API

webpack提供了一个可以直接在Node.js运行时使用的Node.js API。

当你需要自定义构建或开发流程时,Node.js API 非常有用,因为此时所有的报告和错误处理都必须自行实现,webpack 仅仅负责编译的部分。所以 stats 配置选项不会在 webpack() 调用中生效。

Installation

要开始使用webpack Node.js API,如果您尚未安装webpack,请首先安装:

npm install --save-dev webpack

然后在您的Node.js脚本中需要webpack模块:

const webpack = require("webpack" // Or if you prefer ES2015: import webpack from "webpack";

webpack()

导入的 webpack 函数需要传入一个 webpack 配置对象,当同时传入回调函数时就会执行 webpack compiler:

const webpack = require("webpack" webpack{ // Configuration Object }, (err, stats) => { if (err || stats.hasErrors()) { // Handle errors here } // Done processing }

编译错误err 对象内,而是需要使用 stats.hasErrors() 单独处理,你可以在指南的 错误处理 部分查阅到更多细节。err 对象只会包含 webpack 相关的问题,比如配置错误等。

请注意,您可以webpack使用一组配置来提供该功能:

webpack([ { /* Configuration Object */ }, { /* Configuration Object */ }, { /* Configuration Object */ } ], (err, stats) => { // ... }

webpack 不会并行运行多个配置。每个配置仅在前一个配置完成处理后才处理。要让webpack并行处理它们,您可以使用第三方解决方案,如parallel-webpack。

编译器实例

如果你不向 webpack 执行函数传入回调函数,就会得到一个 webpack Compiler 实例。你可以通过它手动触发 webpack 执行器,或者是让它执行构建并监听变更。和 CLI API 很类似。Compiler 实例提供了以下方法:

  • .run(callback)

  • .watch(watchOptions, handler)

这个 API 一次只支持一个并发编译。当使用 run 时,会等待它完成后,然后才能再次调用 runwatch。当使用 watch 时,调用 close,等待它完成后,然后才能再次调用 runwatch。多个并发编译会损坏输出文件。

运行

runCompiler实例上调用方法与上面提到的快速运行方法非常相似:

const webpack = require("webpack" const compiler = webpack{ // Configuration Object } compiler.run((err, stats) => { // ... }

监听

watch(watchOptions, callback)

const webpack = require("webpack" const compiler = webpack{ // Configuration Object } const watching = compiler.watch{ /* watchOptions */ aggregateTimeout: 300, poll: undefined }, (err, stats) => { // Print watch/build result here... console.log(stats }

Watching 选项在这里详细介绍。

关 Watching

watch方法返回一个Watching暴露.close(callback)方法的实例。调用此方法将结束监听:

watching.close(() => { console.log("Watching Ended." }

在现有观察者关闭或失效之前,不允许观察或再次运行。

废止 Watching

使用watching.invalidate,您可以手动使当前编译循环无效,而无需停止监视进程:

watching.invalidate(

统计对象

stats 对象会被作为 webpack() 回调函数的第二个参数传入,可以通过它获取到代码编译过程中的有用信息,包括:

  • 错误和警告(如果有的话)

  • 计时

  • 模块和块信息

webpack CLI使用此信息在控制台中显示格式良好的输出。

当使用 MultiCompiler 时,会返回一个 MultiStats 实例,它实现与 stats 相同的接口,也就是下面描述的方法。

stats对象公开了以下方法:

stats.hasErrors()

可以用来检查编译时是否有错误。返回truefalse

stats.hasWarnings()

可以用来检查编译时是否有警告。返回truefalse

stats.toJson(options)

stats.toJson("minimal" // more options: "verbose", etc.

stats.toJson{ assets: false, hash: true }

是这个函数输出一个例子

stats.toString(options)

返回编译信息的格式化字符串(与CLI输出类似)。

选项stats.toJson(options)与添加一个选项相同:

stats.toString{ // ... // Add console colors colors: true }

以下是一个stats.toString()使用示例:

const webpack = require("webpack" webpack{ // Configuration Object }, (err, stats) => { if (err) { console.error(err return; } console.log(stats.toString{ chunks: false, // Makes the build much quieter colors: true // Shows colors in the console }) }

错误处理

要获得良好的错误处理,您需要考虑以下三种类型的错误:

  • 致命的webpack错误(错误配置等)

  • 编译错误(缺少模块,语法错误等)

  • 编译警告

这是一个可以做到这一点的例子:

const webpack = require("webpack" webpack{ // Configuration Object }, (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 } // Log result... }

自定义文件系统

默认情况下,webpack 使用普通文件系统来读取文件并将文件写入磁盘。但是,还可以使用不同类型的文件系统(内存(memory), webDAV 等)来更改输入或输出行为。为了实现这一点,可以改变 inputFileSystemoutputFileSystem。例如,可以使用 memory-fs 替换默认的 outputFileSystem,以将文件写入到内存中,而不是写入到磁盘:

const MemoryFS = require("memory-fs" const webpack = require("webpack" const fs = new MemoryFS( const compiler = webpack{ /* options*/ } compiler.outputFileSystem = fs; compiler.run((err, stats) => { // Read the output later: const content = fs.readFileSync("..." }

请注意,这是webpack-dev-server和许多其他软件包使用的webpack-dev-middleware用来神秘地隐藏文件,但继续将它们提供给浏览器!

您提供的输出文件系统需要与节点自身的兼容fs接口,这需要mkdirpjoin辅助方法。