plugin.config.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. // Change theme plugin
  2. import MergeLessPlugin from 'antd-pro-merge-less';
  3. import AntDesignThemePlugin from 'antd-theme-webpack-plugin';
  4. import path from 'path';
  5. function getModulePackageName(module) {
  6. if (!module.context) return null;
  7. const nodeModulesPath = path.join(__dirname, '../node_modules/');
  8. if (module.context.substring(0, nodeModulesPath.length) !== nodeModulesPath) {
  9. return null;
  10. }
  11. const moduleRelativePath = module.context.substring(nodeModulesPath.length);
  12. const [moduleDirName] = moduleRelativePath.split(path.sep);
  13. let packageName = moduleDirName;
  14. // handle tree shaking
  15. if (packageName.match('^_')) {
  16. // eslint-disable-next-line prefer-destructuring
  17. packageName = packageName.match(/^_(@?[^@]+)/)[1];
  18. }
  19. return packageName;
  20. }
  21. export default config => {
  22. // pro 和 开发环境再添加这个插件
  23. if (process.env.APP_TYPE === 'site' || process.env.NODE_ENV !== 'production') {
  24. // 将所有 less 合并为一个供 themePlugin使用
  25. const outFile = path.join(__dirname, '../.temp/ant-design-pro.less');
  26. const stylesDir = path.join(__dirname, '../src/');
  27. config.plugin('merge-less').use(MergeLessPlugin, [
  28. {
  29. stylesDir,
  30. outFile,
  31. },
  32. ]);
  33. config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
  34. {
  35. antDir: path.join(__dirname, '../node_modules/antd'),
  36. stylesDir,
  37. varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
  38. mainLessFile: outFile, // themeVariables: ['@primary-color'],
  39. indexFileName: 'index.html',
  40. generateOne: true,
  41. lessUrl: 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js',
  42. },
  43. ]);
  44. }
  45. // optimize chunks
  46. config.optimization
  47. .runtimeChunk(false) // share the same chunks across different modules
  48. .splitChunks({
  49. chunks: 'async',
  50. name: 'vendors',
  51. maxInitialRequests: Infinity,
  52. minSize: 0,
  53. cacheGroups: {
  54. vendors: {
  55. test: module => {
  56. const packageName = getModulePackageName(module);
  57. if (packageName) {
  58. return ['bizcharts', '@antv_data-set'].indexOf(packageName) >= 0;
  59. }
  60. return false;
  61. },
  62. name(module) {
  63. const packageName = getModulePackageName(module);
  64. if (['bizcharts', '@antv_data-set'].indexOf(packageName) >= 0) {
  65. return 'viz'; // visualization package
  66. }
  67. return 'misc';
  68. },
  69. },
  70. },
  71. });
  72. };