添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
逆袭的板栗  ·  MySQL 查询 JSON ...·  3 月前    · 
近视的桔子  ·  This application ...·  4 月前    · 
威武的香瓜  ·  postman 400 bad ...·  8 月前    · 
刀枪不入的小摩托  ·  Cannot find module ...·  1 年前    · 
闯红灯的大象  ·  绑定: ...·  1 年前    · 

Webpack提供了node.js API,可以在Node.js运行时下直接使用。

Webpack仅仅负责编译,其他报告,错误处理都需要自行实现,stats配置选项不会在webpack()调用中生效。

开始使用Node.js API之前需要安装webpack和引入。

npm install --save-dev webpack
const webpack = require('webpack');

或者使用ES2015。

import webpack from 'webpack';

webpack()

导入的webpack函数会将配置对象传给webpack,如果同时传入回调函数,会在webpack compiler运行时被执行。

const webpack = require('webpack');
webpack({
  // [配置对象](/configuration/)
}, (err, stats) => { // [Stats Object](#stats-object)
  if (err || stats.hasErrors()) {
    // [在这里处理错误](#error-handling)
  // 处理完成

err 对象不包含编译错误,需要使用stats.hasErrors()单独处理。err 对象只包含webpack相关的问题,例如配置错误等。

也可以为webpack函数提供一个配置数组,后续详解。

Compiler实例

如果不向webpack传入可执行的回调函数,它会返回一个webpack compiler实例。

可以通过手动执行它或者为它的构建时添加一个监听器。

Compiler实例提供了以下方法。

  • .run(callback)
  • .watch(watchOptions, handler)
  • 通常仅会创建一个主要Compiler实例。Compiler基本上只是执行最低限度的功能,维持生命周期运行。其他加载、打包、写入工作都委托到注册的插件上。

    Compiler实例上的hooks属性用于将插件注册到Compiler的生命周期中的钩子事件上。

    webpack使用WebpackOptionsDefaulterWebpackOptionsApply来配置Compiler实例和内置插件。

    使用run方法启动所有编译工作。完成之后执行传入的callback函数。最终记录下来的stats和errors都在这个callback中获取。

    这个API一次仅支持一次编译。不能并发编译。一次run或者watch,需要调用close等待其完成后才能再次执行run和watch。

    执行(Run)

    const webpack = require('webpack');
    const compiler = webpack({
      // [配置对象](/configuration/)
    compiler.run((err, stats) => { // [Stats Object](#stats-object)
      // ...
      compiler.close((closeErr) => {
        // ...
    

    监听(Watching)

    调用watch方法会出发webpack执行,一旦webpack检测到文件变更,就会重新执行编译。

    该方法会返回一个Watching实例。

    watch(watchOptions, callback);
    
    const webpack = require('webpack');
    const compiler = webpack({
      // [配置对象](/configuration/)
    const watching = compiler.watch({
      // [watchOptions](/configuration/watch/#watchoptions) 示例
      aggregateTimeout: 300,
      poll: undefined
    }, (err, stats) => { // [Stats Object](#stats-object)
      // 这里打印 watch/build 结果...
      console.log(stats);
    

    关闭Watching(Close Watching)

    watch方法返回一个Watching实例,该实例暴露一个.close(callback)方法,调用其方法会结束监听。

    watching.close((closeErr) => {
      console.log('Watching Ended.');
    

    不能在监听器关闭或者失效之前再次watch或run。

    Invalidate Watching

    使用watching.invalidate可以手动使当前编译循环无效,但不会停止监听进程。

    Stats对象

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

  • 错误和警告
  • module和chunk信息
  • webpack CLI正是基于这些信息在控制台展示输出。

    stats对象暴露了以下方法。

    stats.hasErrors()

    用来检查编译期是否有错,返回值为boolean。

    stats.hasWarnings()

    stats.toJson(options)

    以JSON对象形式返回编译信息。options可以是字符串或者对象。

    stats.toJson('minimal'); // [更多选项如: 'verbose' 等](/configuration/stats).
    
    stats.toJson({
      assets: false,
      hash: true,
    

    stats.toString(options)

    以格式化的字符串形式返回编译信息。

    配置对象与toJson一致,额外增加一个

    stats.toString({
      // 增加控制台颜色开关
      colors: true,
    

    用法示例。

    const webpack = require('webpack');
    webpack({
      // [配置对象](/configuration/)
    }, (err, stats) => {
      if (err) {
        console.error(err);
        return;
      console.log(stats.toString({
        chunks: false,  // 使构建过程更静默无输出
        colors: true    // 在控制台展示颜色
    

    MultiCompiler

    可以让webpack同时执行多个配置。传给webpack 的options参数是由多个配置对象构成的数组,webpack会相应地创建多个Compiler示例,并且在所有compiler执行完毕后,调用callback方法。

    var webpack = require('webpack');
    webpack([
      { entry: './index1.js', output: { filename: 'bundle1.js' } },
      { entry: './index2.js', output: { filename: 'bundle2.js' } }
    ], (err, stats) => { // [Stats Object](#stats-object)
      process.stdout.write(stats.toString() + '\n');
    

    多个配置对象在具体执行时不会并行执行。

    错误处理(Error Handling)

    完备的错误处理需要考虑以下三种类型的错误:

  • 致命的webpack错误(配置出错)
  • 覆盖这些场景的示例。

    const webpack = require('webpack');
    webpack({
      // [配置对象](/configuration/)
    }, (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...
    

    自定义文件系统(Custom File Systems)

    默认情况下webpack使用普通文件系统来读取文件并写入。但是还可以使用不同类型的文件系统来更改。

    改变inputFileSystemoutputFileSystem来实现。

    例如,可以使用memfs替换默认的outputFileSystem,将文件写入到内存中。

    const { createFsFromVolume, Volume } = require('memfs');
    const webpack = require('webpack');
    const fs = createFsFromVolume(new Volume());
    const compiler = webpack({
      /* options */
    compiler.outputFileSystem = fs;
    compiler.run((err, stats) => {
      // 之后读取输出:
      const content = fs.readFileSync('...');
      compiler.close((closeErr) => {
        // ...
    

    webpack-dev-server及众多包依赖的webpack-dev-middleware就是通过这种方式将文件放入内存中而不是磁盘中。

    指定的输出文件系统需要兼容Node自身的fs模块接口。

    分类:
    前端
    标签: