モジュールのインポート パスの問題は Webpack のコンパイル中に解決できますか?

Question

環境変数に基づいてバンドル内の特定のコンポーネントのみを含むビルドを作成したいと考えています。

たとえば、次のようにコンポーネントをインポートすると:

「@/components/Module1」から Module1 をインポート

インポートが次のようになるようにパスを実際に変換したいと思います:

import Module1 from '@/components/brands/' process.env.APP_BRAND 'Module1'

すべてのインポートに対してこれを行うのではなく、特定のインポート (ブランド バージョンを持つモジュールなど) に対してのみこれを行いたいので、インポート パスの前に < code>!brand! のようなものを追加したいと思います。 、これはパス変換を適用するためのインジケーターになります。 したがって、上記のロジックは次のインポート パスに対してのみ実行する必要があります:

「!brand!@/components/Module1」から Module1 をインポート

process.env.APP_BRAND が false の場合、元のインポートを保持したいだけです (例: !brand! プレフィックスをパス ）。

重要な点は、Webpack がモジュールを静的に分析して最適化されたビルドを作成できるように、これをビルド時に実行する必要があるということです。これは実現可能でしょうか?このパス変換ロジックを何とか追加する必要があると思うのですが、どうすればよいでしょうか？ローダーやプラグインを作成する必要がありますか、それとも既製のソリューションはありますか?

Webpack 5 を使用しています。

Answer 1

Webpack には、ここで使用できるモジュール resolve 関数が用意されています。ドキュメントここを読んでください。たとえば、あなたの場合、これを行うことができます:

リーリー

ここでは、環境変数を Webpack プロセス (つまり、Node.js プロセス) に渡し、これに基づいて決定を下す必要があることに注意してください。さらに、解決モジュールは 絶対パス である必要があります。