通过Node.js API启动webpack

前面的话

webpack除了可以通过可执行命令启动webpack，还通过node.jsAPI启动webpack
。通过调用webpack模块暴露出的API，可在Node.js程序中调用webpackAPI执行构建。下面介绍如何在node中通过可执行文件启动webpack。

整体架构

• main.js入口文件
• webpack.config.js: webpack配置文件
• webpack.js：在node环境下运行的可执行的文件

main.js文件内容

console.log('Hello,Webpack');

webpack.config.js文件

const path = require('path');
module.exports = {
    entry: './main.js',
    output: {
        // 输出文件
        filename: 'bundle.js',
        // 文件存放路径
        path: path.resolve(__dirname, './dist')
    }
}

webpack.js文件

在可执行文件中，导入webpack模块：

const webpack = require('webpack');

导出的webpack是一个函数,使用方法：

webpack({
	// webpack的配置，与webpack.config.js文件一致
 }, (err, stats) => {
  	if(err || stats.hasErrors()) {
        // 构建过程出错
    }
    // 成功构建
}
)

也可以将webpack的配置直接写下webpack.config.js文件中，完整代码如下：

// 导入webpack模块
const webpack = require('webpack');

// 可以使用ES6语法导入
// import webpack from "webpack";

// 读取webpack.config.js文件中的配置
const config = require('./webpack.config.js');

// 导出的webpack其实是一个函数
webpack(config, (err, stats) => {
    if(err || stats.hasErrors()) {
        // 构建过程出错
    }
    // 成功构建
})

到此为止，我们就可以执行命令node webpack.js,在根目录下就会生成一个新的目录。

以监听模式运行

像上面使用webpack API的方法只能执行一次构建，无法以监听模式启动Webpack，为了在使用API时以监听模式启动，就要获取Compiler实例。

Compiler实例：用于控制启动webpack

如何获取Compiler实例？如果webpack API不传入第二个回调函数，只传入一个配置文件的参数，就会返回Compiler实例。

const compiler = webpack(config);

使用compiler实例的watch来监听模式的启动：

// 调用compiler.watch并以监听模式启动，返回的watching用来关闭监听
const watching = compiler.watch({
    // watchOptions
    aggregateTimeout: 300,
}, (err, stats) => {
    // 每次因文件发生变化而重新执行完构建之后
});

返回的watching用来关闭监听，使用watch.close()来关闭：

// 调用watching.close关闭监听
watching.close(() =>{
    // 监听关闭之后
});

将上面的webpack.js改为下面的代码，就可以以监听的模式启动，完整代码：

// 导入webpack模块
const webpack = require('webpack');
// 可以使用ES6语法导入
// import webpack from "webpack";

// 读取webpack.config.js文件中的配置
const config = require('./webpack.config.js');

// webpack中不传入第二个参数，就会返回一个Compiler实例，用于控制启动，而不是像上面那样立即启动
const compiler = webpack(config);

// 调用compiler.watch并以监听模式启动，返回的watching用来关闭监听
const watching = compiler.watch({
    // watchOptions
    aggregateTimeout: 300,
}, (err, stats) => {
    // 每次因文件发生变化而重新执行完构建之后
});

// 调用watching.close关闭监听
// watching.close(() =>{
//     // 监听关闭之后
// });