用 NodeJs 来启动 webpack

传统我们启用 webpack 一般是使用 webpack.config.js 配置文件。在牛一点使用 webpack --config webpack.config.dev.js 来替代 webpack 默认启动文件。

现在：我们用 NodeJs 来启动 webpack

webpack 除了提供可执行的命令行工具，例如 --config , --mode 等等，还提供了可在 NodeJs 环境调用的库。通过 webpack 暴露的 API，可直接在 NodeJs程序中调用 webpack 执行构建。通过 API 去调用并执行 webpack，比直接通过可执行文件启动更加灵活，可用在一些特殊的场景中。

webpack 其实就是一个 NodeJs 程序，全部通过 JavaScript 来开发完成的。在执行 webpack 其实就是执行的 node ./node_moules/webpack/bin/webpack.js。

一、安装使用 webpack

在调用 webpack API 之前需要先安装：

npm install -S webpack

安装成功就可以使用代码导入来调试了：

我们先新建一个 a.js 文件。

const webpack = require("webpack");
console.log(webpack);
console.log(webpack.version);

运行 a.js ：

node a.js

这时候会输出 webpack 的所有属性和方法，其中 webpack.version 就是 webpack 的版本号。

那么导出的 webpack 这个函数到底怎么使用：

webpack({
    //webpack配置，内容和webpack.config.js一致
},(err,res)=>{
    if(err || res.hasErrors()){
        console.log("构建过程出错！");
    }else{
        console.log("构建成功！");
    }
});

我们知道 webpack.config.js 文件的书写规范是符合 node 规范的，里面通过 module.exports 暴露出一个对象。所以如果我们是把 webpack 的配置写在 webpack.config.js 里面的，那么就可以这样使用：

//读取webpack.config.js 里面的配置
const config = require("./webpack.config.js");
const webpack = require("webpack");
webpack(config,(err,stats)=>{
    if(err || stats.hasErrors()){
        console.log(stats);
        console.log("构建过程出错！");
    }else{
        console.log("构建成功！");
    }
});

我们直接运行 a.js：

node a.js

这时候 webpack 就会成功构建一个，和我们以前直接输入 webpack，进行一个打包没啥区别。但是在开发中我们肯定是想实时监听。所以：

webpack 函数，如果我们不传入 callback 回调函数作为第二个参数，就是返回一个 compiler 实例，它的用途就是控制启动，来达到实时监听的目的。

const config = require("./webpack.config.js");
const webpack = require("webpack");
const compiler = webpack(config);
//compiler.watch监听模式启动
//返回的watching 可以用于关闭监听
const watching = compiler.watch({
    //watchOptions:{
    //     不监听的文件和文件夹，支持正则
    //     ignore:/node_modules/,
    //     监听到变化等待300ms 再去执行文件防止文件更新太快导致编译频繁
    //     默认300ms
    //     aggregateTimeout: 300,
    //     判断文件是否发生变化是通过不停地询问系统指定文件有没有变化实现的
    //     poll:1000
    // },watch:true时有效
    aggregateTimeout: 300
},(err,stats)=>{
    if(err || stats.hasErrors()){
        console.log(stats);
        console.log("构建过程出错！");
    }else{
        console.log("实时构建成功！");
    }
});
//关闭监听
watching.close(()=>{
    console.log("成功关闭监听！");
});