Webpackを使用する場合、デフォルトではnode_modules内の依存関係がビルド出力に含まれます。Webアプリ向けのバンドルを構築する際には便利な挙動ですが、WebpackでライブラリやNodeアプリケーションをビルドするようなユースケースでは、これらの依存関係を除外し、実行時にnode_modulesから読み込まれるようにしたい場合があります。

Webpackのexternalsオプションを使うと、ビルドから除外する依存関係を指定できます。すべての依存関係を除外したい場合は、webpack-node-externalsを利用すると、プロジェクトのnode_modulesディレクトリにあるすべての依存関係を除外するexternals関数を簡単に構築できます。

// webpack.config.js
const nodeExternals = require('webpack-node-externals');

module.exports = {
    ...
    // ignore all modules in node_modules
    externals: [nodeExternals()],
    ...
};

私たちのユースケース

Mintelでは、デザインシステムを構成するフロントエンドライブラリ群を保有しています。Storybookをローカル開発に使用していますが、ライブラリとStorybookのビルドプロセスの違いにより、エンジニアが変更を加える際に問題が見逃されるケースがいくつかありました。

こうした問題をより早い段階で発見するため、プラットフォームチームはライブラリとStorybookのビルドプロセスを統一し、同じWebpack設定でStorybookと公開するライブラリの両方をビルドすることにしました。

しかし、この変更によってこれらのライブラリを利用するアプリケーションのバンドルサイズが増加しました。ライブラリがすべての依存関係をビルド時にパッケージ化してしまうため、依存関係が共有されている場合に重複が生じたのです。Webpackのビルドから依存関係を除外することで、依存関係の解決を利用側のプロジェクトに再び委ね、パッケージマネージャーに本来の役割を任せることができました。