22

正確に何がチャンクに入ったのかを示すデバッグ オプションやプラグインが webpack に見つからないようです。

なぜこれが必要なのですか？コードを分割すると、文字通りすべてが非常に大きくなり、すべてが 1 つのファイルにまとめられる場合があることに気付きました。webpack からのブートストラップ コードがそれほど重要であるとは思わないため、これは少し直感に反します。縮小/重複排除である可能性があると思いますが、実際にどのモジュールがチャンクされているかを知らずに、いくつかの分離テストを実行して確認することは非常に困難です.

私のビルド プロセスでは gulp を使用しています。それが違いを生むなら。

4

5 に答える 5

5

これは、Boopathi Rajaa の回答の更新版であり、以降のバージョンで機能しますWebpack(私は 4.37.0 を使用しています)。

この更新されたバージョンは私のために働いた：

class PrintChunksPlugin {
    apply (compiler) {
        compiler.plugin('compilation', compilation => {
            compilation.plugin('after-optimize-chunk-assets', chunks => {
                console.log(chunks.map(chunk => ({
                    id: chunk.id,
                    name: chunk.name,
                    modules: Array.from(chunk._modules).map(module => module.id)
                })))
            })
        })
    }
}

使用法：

plugins: [
    new PrintChunksPlugin(),
]

大きな違いは、モジュール情報を_modulesではなくに格納するようmodulesになったことと、Array.from. module.id必要なものに近いことがわかりましたが、必要なmodule.request場合はまだそこにあります.

于 2019-07-30T20:13:21.957 に答える