plugin.config.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. // Change theme plugin
  2. import MergeLessPlugin from 'antd-pro-merge-less';
  3. // import AntDesignThemePlugin from 'antd-theme-webpack-plugin';
  4. import ThemeColorReplacer from 'webpack-theme-color-replacer';
  5. import path from 'path';
  6. import generate from '@ant-design/colors/lib/generate';
  7. function getModulePackageName(module) {
  8. if (!module.context) return null;
  9. const nodeModulesPath = path.join(__dirname, '../node_modules/');
  10. if (module.context.substring(0, nodeModulesPath.length) !== nodeModulesPath) {
  11. return null;
  12. }
  13. const moduleRelativePath = module.context.substring(nodeModulesPath.length);
  14. const [moduleDirName] = moduleRelativePath.split(path.sep);
  15. let packageName = moduleDirName;
  16. // handle tree shaking
  17. if (packageName.match('^_')) {
  18. // eslint-disable-next-line prefer-destructuring
  19. packageName = packageName.match(/^_(@?[^@]+)/)[1];
  20. }
  21. return packageName;
  22. }
  23. export default config => {
  24. // preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量,请不要在你的项目中使用它。
  25. if (
  26. process.env.ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' ||
  27. process.env.NODE_ENV !== 'production'
  28. ) {
  29. // 将所有 less 合并为一个供 themePlugin使用
  30. const outFile = path.join(__dirname, '../.temp/ant-design-pro.less');
  31. const stylesDir = path.join(__dirname, '../src/');
  32. config.plugin('merge-less').use(MergeLessPlugin, [
  33. {
  34. stylesDir,
  35. outFile,
  36. },
  37. ]);
  38. config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [
  39. {
  40. fileName: 'css/theme-colors.css',
  41. matchColors: generate('#1890ff'), // 主色系列
  42. // 改变样式选择器,解决样式覆盖问题
  43. changeSelector(selector) {
  44. switch (selector) {
  45. case '.ant-calendar-today .ant-calendar-date':
  46. return ':not(.ant-calendar-selected-day)' + selector;
  47. default:
  48. return selector;
  49. }
  50. },
  51. },
  52. ]);
  53. // config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
  54. // {
  55. // antDir: path.join(__dirname, '../node_modules/antd'),
  56. // stylesDir,
  57. // varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
  58. // mainLessFile: outFile, // themeVariables: ['@primary-color'],
  59. // indexFileName: 'index.html',
  60. // generateOne: true,
  61. // lessUrl: 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js',
  62. // },
  63. // ]);
  64. }
  65. // optimize chunks
  66. config.optimization
  67. .runtimeChunk(false) // share the same chunks across different modules
  68. .splitChunks({
  69. chunks: 'async',
  70. name: 'vendors',
  71. maxInitialRequests: Infinity,
  72. minSize: 0,
  73. cacheGroups: {
  74. vendors: {
  75. test: module => {
  76. const packageName = getModulePackageName(module);
  77. if (packageName) {
  78. return ['bizcharts', '@antv_data-set'].indexOf(packageName) >= 0;
  79. }
  80. return false;
  81. },
  82. name(module) {
  83. const packageName = getModulePackageName(module);
  84. if (['bizcharts', '@antv_data-set'].indexOf(packageName) >= 0) {
  85. return 'viz'; // visualization package
  86. }
  87. return 'misc';
  88. },
  89. },
  90. },
  91. });
  92. };