前面的话
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(() =>{
// // 监听关闭之后
// });