web-dev-qa-db-ja.com

他のモジュールに基づいてその場でバンドルにモジュールを追加するWebpackプラグインを作成する方法は？

翻訳サービス用のWebpackプラグインの作成に問題があります。

目標は次のとおりです。

  1. コンパイル中に必要なすべてのモジュールの名前（およびソースコード）を取得します。含まれているソースコードをスキャンして特別なt()関数を使用できるようにする必要がありますが、バンドルに含まれるモジュールのみをスキャンしたい（ビルド構成によっては、すべてのプロジェクトモジュール）。
  2. 収集したモジュールに基づいて、追加のモジュール（翻訳付き）をその場で作成し、それらをバンドルに追加したいと思います。これらのモジュールは、独自の依存関係をインポートできる必要があります。

追加の要件は、Webpackのコード分割機能が、オンザフライで作成されたモジュールで機能することです（たとえば、bundle.[lang].js）。また、この質問の範囲外となる可能性があるので、翻訳付きのチャンクをオプションにする必要があります（そのため、すべての言語をロードする必要はなく、1つだけをロードする必要があります）。

詳細は https://github.com/ckeditor/ckeditor5/issues/387 にあります。

複数の解決策を試してきましたが、Webpack 2のドキュメントはあまり役に立ちません。モジュール解決フック（before-resolve）ですが、すべての依存関係がいつ解決されるかはわかりません。その後、さらにモジュールを追加できるかどうかもわかりません（その方法もaddEntry okでいつ使用できるかはわかりません）それ？）。

WebpackプラグインとWebpackローダーを接続することも考えていました（必要な機能は Webpackのスタイルローダー に非常に似ているためです）、プラグインレベルからは、ローダーへのパスのみを追加でき、ローダー自体なので、パラメーターとして構成オブジェクトを渡すことができません。間違っていますか？

PS。私はWebpack 2を使用しています。要件がおかしいと思われる場合は、 https://github.com/ckeditor/ckeditor5/issues/387 :)を参照してください。

webpackwebpack-2webpack-plugin
44
Maciej Bukowski

これは本当に複雑な質問ですが、特定のモジュールに依存関係を追加する方法を、そのモジュールから必要であるかのように示すことができます。これにより、追加されたモジュールが正しいチャンクに含まれ、親モジュールがバンドルから削除された場合も削除されます。

const CommonJsRequireDependency = require("webpack/lib/dependencies/CommonJsRequireDependency")

class MyPlugin {
  apply(compiler) {
    compiler.plugin("compilation", compilation => {
      compilation.plugin("succeed-module", module => {
        // this will be called for every successfully built module, but before it's parsed and
        // its dependencies are built. The built source is available as module._source.source()
        // and you can add additional dependencies like so:
        module.dependencies.Push(new CommonJsRequireDependency("my-dependency", null))
      }
    }
  }
}

これはその一部にすぎません。また、実際に翻訳を生成するには、独自のローダーを作成する必要があります（my-dependencyとmy-loader!path/to/moduleですぐに呼び出すことができます）。チャンクが作成された後のいくつかのステップでは、チャンクを実際にrequiredではないため、新しいアセットに抽出してロードする可能性があります。

4
Gunchars