節點介面

Webpack 提供了一個 Node.js API，可直接在 Node.js 執行時期中使用。

Node.js API 在您需要自訂建置或開發流程時很有用，因為所有回報和錯誤處理都必須手動完成，而 webpack 只負責編譯部分。因此，stats 組態選項在 webpack() 呼叫中不會有任何效果。

安裝

若要開始使用 webpack Node.js API，請先安裝 webpack（如果您尚未安裝）

npm install --save-dev webpack

然後在您的 Node.js 腳本中載入 webpack 模組

const webpack = require('webpack');

或者如果您偏好 ES2015

import webpack from 'webpack';

webpack()

匯入的 webpack 函式會提供一個 webpack 組態物件，並在提供回呼函式時執行 webpack 編譯器

const webpack = require('webpack');

webpack({}, (err, stats) => {
  if (err || stats.hasErrors()) {
    // ...
  }
  // Done processing
});

編譯器執行個體

如果您沒有傳遞 webpack 執行函式一個回呼，它會傳回一個 webpack Compiler 執行個體。這個執行個體可以用於手動觸發 webpack 執行，或讓它建置並監控變更，很像 CLI。Compiler 執行個體提供以下方法

.run(callback)
.watch(watchOptions, handler)

一般來說，只會建立一個主控 Compiler 執行個體，儘管可以建立子編譯器來委派特定任務。Compiler 最終是一個執行最少功能的函式，用於維持生命週期執行。它將所有載入、綑綁和寫入工作委派給已註冊的外掛程式。

Compiler 執行個體上的 hooks 屬性用於註冊外掛程式到 Compiler 生命週期中的任何掛鉤事件。webpack 使用 WebpackOptionsDefaulter 和 WebpackOptionsApply 工具程式，使用所有內建外掛程式來設定其 Compiler 執行個體。

然後使用 run 方法啟動所有編譯工作。完成後，會執行指定的 callback 函式。應在此 callback 函式中執行統計資料和錯誤的最終記錄。

執行

在 Compiler 實例上呼叫 run 方法，很像上面提到的快速執行方法

const webpack = require('webpack');

const compiler = webpack({
  // ...
});

compiler.run((err, stats) => {
  // ...

  compiler.close((closeErr) => {
    // ...
  });
});

監看

呼叫 watch 方法會觸發 webpack 執行器，但接著會監看變更（很像 CLI：webpack --watch），只要 webpack 偵測到變更，就會再次執行。傳回 Watching 的實例。

watch(watchOptions, callback);

const webpack = require('webpack');

const compiler = webpack({
  // ...
});

const watching = compiler.watch(
  {
    // Example
    aggregateTimeout: 300,
    poll: undefined,
  },
  (err, stats) => {
    // Print watch/build result here...
    console.log(stats);
  }
);

Watching 選項在這裡有詳細說明。

關閉 `Watching`

watch 方法會傳回一個公開 .close(callback) 方法的 Watching 實例。呼叫這個方法會結束監看

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

使 `Watching` 失效

使用 watching.invalidate，你可以手動使目前的編譯回合失效，而不用停止監看程序

watching.invalidate();

統計物件

傳遞給 webpack() 回呼函式的第二個引數的 stats 物件，是關於程式碼編譯過程的良好資訊來源。它包含

錯誤和警告（如果有）
計時
模組和區塊資訊

webpack CLI 使用這些資訊在您的主控台中顯示格式良好的輸出。

這個 stats 物件公開下列方法

stats.hasErrors()

可用於檢查編譯時是否有錯誤。傳回 true 或 false。

stats.hasWarnings()

可用於檢查編譯時是否有警告。傳回 true 或 false。

stats.toJson(options)

傳回編譯資訊作為 JSON 物件。options 可以是字串（預設）或物件，以進行更精細的控制

stats.toJson('minimal');

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(
  {
    // ...
  },
  (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
      })
    );
  }
);

MultiCompiler

MultiCompiler 模組允許 webpack 在個別編譯器中執行多組設定。如果 webpack 的 NodeJS api 中的 options 參數是一組選項，webpack 會套用個別編譯器，並在所有編譯器執行完畢後呼叫 callback。

var webpack = require('webpack');

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

錯誤處理

為了良好的錯誤處理，您需要考量這三種類型的錯誤

致命 webpack 錯誤（錯誤設定等）
編譯錯誤（遺失模組、語法錯誤等）
編譯警告

以下是一個執行所有這些的範例

const webpack = require('webpack');

webpack(
  {
    // ...
  },
  (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 使用一般檔案系統讀取檔案和寫入檔案到磁碟。不過，可以透過使用不同類型的檔案系統（記憶體、webDAV 等）來變更輸入或輸出行為。為達成此目的，可以變更 inputFileSystem 或 outputFileSystem。例如，您可以用 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) => {
  // Read the output later:
  const content = fs.readFileSync('...');
  compiler.close((closeErr) => {
    // ...
  });
});

請注意，這是 webpack-dev-middleware（由 webpack-dev-server 和許多其他套件使用）用來神秘地隱藏您的檔案，但繼續提供給瀏覽器的方式！

編輯此頁面·列印此頁面

« 上一頁

命令列介面

統計資料