Node インターフェース
webpackは、Node.jsランタイムで直接使用できるNode.js APIを提供します。
Node.js APIは、ビルドや開発プロセスをカスタマイズする必要がある場合に役立ちます。これは、すべてのレポートとエラー処理を手動で行う必要があり、webpackはコンパイル部分のみを行うためです。このため、stats構成オプションは、webpack()呼び出しでは効果がありません。
インストール
webpack Node.js APIの使用を開始するには、まずwebpackをまだインストールしていない場合はインストールしてください。
npm install --save-dev webpack次に、Node.jsスクリプトでwebpackモジュールをrequireします。
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)
通常、1つのマスターCompilerインスタンスのみが作成されますが、特定のタスクを委任するために子コンパイラーを作成できます。Compilerは、ライフサイクルを実行するために必要最小限の機能のみを実行する関数です。すべての読み込み、バンドル、および書き込み作業は、登録されたプラグインに委任します。
Compilerインスタンスのhooksプロパティは、Compilerのライフサイクル内の任意のフックイベントにプラグインを登録するために使用されます。WebpackOptionsDefaulterとWebpackOptionsApplyユーティリティは、webpackによって、すべての組み込みプラグインを使用してCompilerインスタンスを構成するために使用されます。
次に、runメソッドを使用して、すべてのコンパイル作業を開始します。完了すると、指定されたcallback関数が実行されます。統計とエラーの最終的なロギングは、このcallback関数で行う必要があります。
Run（実行）
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();Statsオブジェクト
webpack()コールバックの2番目の引数として渡される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のドキュメントで説明されています。
この関数の出力の例を以下に示します。
stats.toString(options)
コンパイル情報のフォーマット済み文字列を返します（CLI出力と同様）。
オプションは、stats.toJson(options)と同じですが、1つ追加があります。
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');
}
);エラー処理
適切なエラー処理を行うには、次の3種類のエラーを考慮する必要があります。
- 致命的な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を変更できます。たとえば、デフォルトのoutputFileSystemをmemfsに置き換えて、ディスクではなくメモリにファイルを書き込むことができます。
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や他の多くのパッケージが、ファイルを不思議に隠しながらもブラウザーに引き続き提供するために使用するものです。
10 貢献者
