Webpackを使用してコンパイルされたアプリケーション用のプラグインシステム

Question

コンテキスト：私は、フロントエンドのsymfonyとWebpackによって結ばれた反応/反応ルータを使用して自分の製品を開発しています。私は自分のアプリケーションを「拡張機能」に分割する予定です。そのため、「コア」バンドルとその周りに複数の異なる拡張バンドル（私の製品の追加機能のセット）があります。

ここで、フロントエンドをバックエンドと同じように拡張したいと思います。私は、自分の "CoreBundle"内の既存の "コア"コンポーネントに、自分の拡張バンドルで新しいReactコンポーネントを追加できるようにしたいと考えています。

しかし、Webpackがプラグインシステムのようなものを作り出すには、すべてのことを厳密にカプセル化しているようです。別々のWebpack構成を持つ複数のバンドルを持つことは可能ですか？そのJavaScriptはプラグインシステムの開発を可能にする方法で相互接続されますか？目標は、1つのBundleのJSを個別に開発することができますが、同時に、そのプロセスで別のBundleからすでにコンパイルされたJSリソースを使用できることです。

Answer 1

は、私はあなただけバンドルDllPluginとDllReferencePlugin

DllPluginは、DLL を作成するために、別のWebPACKの設定に使用されているを使用してこれを達成することができるはずだと思います。依存関係をマップするためにDllReferencePlugin によって使用されるmanifest.jsonファイルも作成されます。

は、私の場合は

https://webpack.js.org/plugins/dll-plugin/

で詳細なドキュメントを参照してください、私は1つのビルドで（など、フラックスと反応）すべてのベンダーライブラリを結合するためにこれを使用して、参照としてそれを使用私の他のWebpack ConfigではすべてのReactコンポーネントをバンドルしますが、Reactや他のライブラリはDllReferencePluginを使って参照します。

マイwebpack.dll.js設定ファイル：

var path = require("path"); 
var webpack = require("webpack"); 

module.exports = { 
    entry: { 
    libs: [path.join(__dirname, "common", "lib.js")] 
    }, 
    output: { 
    path: path.join(__dirname, "dist", "dll"), 
    filename: "[name].dll.js", 
    library: "[name]" 
    }, 
    plugins: [ 
    new webpack.DllPlugin({ 
     path: path.join(__dirname, "dll", "[name]-manifest.json"), 
     name: "[name]", 
     context: path.resolve(__dirname, "common") 
    }), 
    ] 
}; 

そして私のメインwebpack.config.jsで、私は参照プラグインを使用します。

new webpack.DllReferencePlugin({ 
     context: path.resolve(__dirname, "common"), 
     manifest:require('./dll/libs-manifest.json') 
    }) 

あなたのコードを分割する方法に応じて、あなたは、あなたの要件に従って別々のWebPACKの設定で、それぞれを複数のDLLを作成することができます。そして、あなたの要求に従ってdllを他のwebpackバンドルで参照してください。