3

Webpack 4 Split Chunks Plugin を使用して、複数のベンダー バンドルを作成しようとしています。この場合、react/react-dom 用に 1 つのチャンクを作成し、react-router/react-router-dom 用に 1 つのチャンクを作成します。

cacheGroupsのみが含まれreactvendorいる場合、ビルドは期待どおりに機能します。バンドルの出力は次のとおりです。

- index
- react
- runtime
- vendors

同様に、cacheGroups のみがありroutervendor期待どおりに機能する場合。出力は次のとおりです。

- index
- router
- runtime
- vendors

どちらの場合でも、チャンクが作成されたときに、検査すると、それぞれのケースでreactまたはの正しいコードが表示されます。router

しかし...両方を含めると機能しません。この場合、routerチャンクのみが作成され、reactコードがインデックス(src)バンドルにプッシュされます。

前の cacheGroup の無効化を引き起こしている正規表現パターンに何か問題があると思われますか? どんな助けでも大歓迎です。

splitChunks の webpack 構成は次のとおりです。

splitChunks: {
  cacheGroups: {
    react: {
      test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
      name: 'react',
      chunks: 'all'
    },
    router: {
      test: /[\\/]node_modules[\\/](react-router|react-router-dom)[\\/]/,
      name: 'router',
      chunks: 'all'
    },
    vendor: {
      test(mod) {
        // exclude anything outside node modules
        if (!mod.context.includes('node_modules')) {
          return false;
        }

        // exclude react and react-dom
        if (/[\\/]node_modules[\\/](react|react-dom)[\\/]/.test(mod.context)) {
          return false;
        }

        // exclude react-router and react-router-dom
        if (/[\\/]node_modules[\\/](react-router|react-router-dom)[\\/]/.test(mod.context)) {
          return false;
        }

        // return all other node modules
        return true;
      },
      name: 'vendors',
      chunks: 'all'
    }
  }
}
4

1 に答える 1