複数のWebPACKのConfigsを順番に実行します

https://www.viget.com/articles/run-multiple-webpack-configs-sequentially/

CONSTパスは=（「パス」）を必要とします。
CONST serverConfig = { 
    エントリ'./src/b.ts' 
} 

CONST CONFIG2 = { 
    エントリ' ./src/index.ts'、
    devtool： 'インラインソースマップ'、
    モジュール：{ 
        ルール：[ 
            { 
                テスト：/\.tsx?$/、
                使用： 'TS-ローダ'、
                除外する：/ node_modules / 
            } 
        ] 
    }、
    "devServer"：{ 
        "ポート"：8083 
    }、
    解決：{ 
        拡張：[ '.tsx'、 ' .TS'、」の.js'] 
    }、
    出力：{  
        ファイル名：'バンドル。
        パス：パス。
}。
module.exportsは= [CONFIG2、serverConfig]

---------------------------------------------

1つのWebPACKの設定が別の結果に依存する場合、順次設定を実行すると、一日を保存することができます。

私はWebPACKのビルドプロセスを持っており、それは2つの絶縁構成（私のサーバー側のビルドのための1つ、と私のクライアント側のビルドのための別）を有します。ここでは、信じられないほど簡単な例です：

// webpack.config.js

const clientConfig = {
  entry: './src/client/index.js', } const serverConfig = { entry: './src/server/index.js' } module.exports = [clientConfig, serverConfig]

すべてが迅速かつ容易に一緒にクリックされた、WebPACKのは、これら二つのビルドを実行し、環境ごとに異なるバンドルをエクスポートすることができます。我々はより多くの機能を追加したとしてしかし、その後、もちろん、初期の頃の喜び無罪は色あせました。

ラブ

私たちは、と呼ばれるライブラリに引っ張らロード可能リアクトビルド中のファイルを生成することができますWebPACKのプラグインが付属しています、：（幻想図書館側注意を）。このファイルの生成は、クライアントの設定で定義されていますが、サーバ内のアプリケーションコードは、そのファイルに依存しています。ファイル自体はビルドアーティファクトなので、私たちは、ソース管理にチェックインしていないので、ビルドは、このファイルのアップフロントの存在なしで成功しなければなりません。

// webpack.config.js
const { ReactLoadablePlugin } = require('react-loadable/webpack') const clientConfig = { entry: './src/client/index.js', plugins: [ // This plugin creates the react-loadable.json file new ReactLoadablePlugin({ filename: path.resolve(__dirname, 'react-loadable.json') }), ] } const serverConfig = { // This entry point makes use of the built react-loadable.json file entry: './src/server/index.js' } module.exports = [clientConfig, serverConfig]

物事が動作を停止する場所です。私は（私は、ビルドログでそれを見ることができる、と私は、サーバー構築の一切の言及を見る前に、私はこれらのログを見ることができます）クライアントの設定が正常に新しいファイルを作成していてもので構成は、並行して構築されていると推定しました、サーバーのビルドが失敗すると、「私はそのファイルを見つけることができません！」エラー。ファイルは、ビルドの実行前に存在している場合は、すべてがスムーズに流れるので、問題はそのアーティファクトの事前存在せず、それを動作させるためにどのようになりました。

ソリューション

インターネットはこれについて言うべきいくつかのことがありました。1つのオプションは、ビルドをばらばらにし、手動で孤立して各設定を構築することです。これはあなたのCLIの使用状況といくつかのあいが必要ですが、1つの設定を完全に新しいものを開始する前に終了していることを確認しません。私は、より合理化されたソリューション、私はあなたが期待することWebPACKの方法を実行できるようになるものを見つけるために誘惑されました。

私は何になってしまったことの延長だった WebpackBeforeBuildPlugin だけで必要なファイルの存在をポーリング。

// WaitPlugin.js
const WebpackBeforeBuildPlugin = require('before-build-webpack') const fs = require('fs') class WaitPlugin extends WebpackBeforeBuildPlugin { constructor(file, interval = 100, timeout = 10000) { super(function(stats, callback) { let start = Date.now() function poll() { if (fs.existsSync(file)) { callback() } else if (Date.now() - start > timeout) { throw Error("Maybe it just wasn't meant to be.") } else { setTimeout(poll, interval) } } poll() }) } } module.exports = WaitPlugin

// webpack.config.js
const { ReactLoadablePlugin } = require('react-loadable/webpack') const WaitPlugin = require('./WaitPlugin') const clientConfig = { entry: './src/client/index.js', plugins: [ new ReactLoadablePlugin({ filename: path.resolve(__dirname, 'react-loadable.json') }), ] } const serverConfig = { entry: './src/server/index.js', plugins: [ new WaitPlugin('react-loadable.json') ] } module.exports = [clientConfig, serverConfig]

クライアントの設定を包み込むながら今、サーバ設定がハングします。問題のファイルが存在する場合（10秒以内）100ミリ秒ごとのチェック、ビルドにのみ続行されます。

私はもっとdefinably複数の構成は、順番にビルドを実行できるように期待していたが、これは確かにトリックを行っていることを認めています。あなたはこの問題に対する別の解決策を見つけた場合、私たちは以下のコメントでそれについて聞いてみたいです！

複数のWebPACKのConfigsを順番に実行します

ラブ

ソリューション

おすすめ