web-dev-qa-db-ja.com

Webpack 4移行CommonsChunkPlugin

次のコードをwebpack 3から4に移行するのに助けが必要です。

new webpack.optimize.CommonsChunkPlugin({
    minChunks: module => module.context && module.context.indexOf("node_modules") !== -1,
    name: "vendor",
    chunks: ["main"]
})

2つのエントリファイルがあり、最初のファイルの依存関係のみをベンダーチャンクに含めるようにします。 2番目のエントリの依存関係は、すべて独自のバンドルにとどまる必要があります。

javascriptwebpackwebpack-3commonschunkpluginwebpack-4
35
Erik Bender

2つのエントリファイルがあり、最初のファイルの依存関係のみをベンダーチャンクに含めるようにします。 2番目のエントリの依存関係は、すべて独自のバンドルにとどまる必要があります。

エントリポイントがmainとsecondaryであると仮定します：

entry: {
    main: 'path-to/main.js',
    secondary: 'path-to/secondary.js'
}

webpack-4 を使用すると、vendorsチャンクからmainモジュールのみを抽出できますが、作成するsecondary関数のtest関数を使用して、そのチャンク内のcacheGroupsで参照される他のサードパーティモジュールを残すことができます。

optimization: {
    splitChunks: {
        cacheGroups: {
            vendors: {
                name: 'vendors',
                chunks: 'all',
                reuseExistingChunk: true,
                priority: 1,
                enforce: true,
                test(module, chunks) {
                    const name = module.nameForCondition && module.nameForCondition();
                    return chunks.some(chunk => {
                        return chunk.name === 'main' && /[\\/]node_modules[\\/]/.test(name);
                    });
                }
            },
            secondary: {
                name: 'secondary',
                chunks: 'all',
                priority: 2,
                enforce: true,
                test(module, chunks) {
                    return chunks.some(chunk => chunk.name === 'secondary');
                }
            }
        }
    }
}
5
Carloluis

これを理解するのにしばらく時間がかかりましたが、私にとって重要なことは、webpack 4のchunks引数が特定のエントリのみを含めることができる関数を取るようになったことです。これは最近の変更だと思います。なぜなら、投稿時には公式のドキュメントにはなかったからです。

splitChunks: {
  cacheGroups: {
    vendor: {
      name: 'vendor',
      chunks: chunk => chunk.name == 'main',
      reuseExistingChunk: true,
      priority: 1,
      test: module =>
        /[\\/]node_modules[\\/]/.test(module.context),
      minChunks: 1,
      minSize: 0,
    },
  },
},
2
Nick B.