@cisdi/pangu/bin/config/webpack/react.js

develop tool for ui-engine project

const path = require('path')
const fs = require('fs')
const { argv } = require('yargs')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const { srcDir, workDir } = require('../../utils/paths')
const app = require('../../utils/app')
const AntDesignThemePlugin = require('antd-theme-webpack-plugin')
const HtmlWebpackInjectPlugin = require('html-webpack-inject-plugin').default
const { getLessVars } = require('antd-theme-generator')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const { supportTypeScript } = require('../../utils/language')

const DEV = process.env.NODE_ENV === 'development'

module.exports = function (config) {
  if (DEV) {
    config.plugins.push(new ReactRefreshWebpackPlugin())
  }

  if (app.dynamicTheme) {
    const antDir = path.resolve(workDir, 'node_modules/antd')

    const defaultVarsPath = path.resolve(antDir, 'es/style/themes/default.less')

    const vars = getLessVars(defaultVarsPath)
    const varFilePath = fs.existsSync(
      path.resolve(srcDir, 'styles/theme/vars.less')
    )
      ? path.resolve(srcDir, 'styles/theme/vars.less')
      : path.resolve(__dirname, '../vars.less')

    config.plugins.push(
      new AntDesignThemePlugin({
        stylesDir: path.resolve(srcDir, 'styles/theme'),
        varFile: varFilePath,
        antDir,
        indexFileName: 'index.html',
        themeVariables: Object.keys(vars || {}),
      })
    )

    config.plugins.push(
      new HtmlWebpackInjectPlugin({
        externals: [
          {
            tag: 'link',
            attrs: {
              rel: 'stylesheet/less',
              id: 'theme-style',
              href: './color.less',
              type: 'text/css',
            },
          },
          {
            tag: 'script',
            innerHTML: `window.less = { async: false, env: 'production', javascriptEnabled: true }`,
          },
          {
            tag: 'script',
            attrs: {
              src: 'https://cdn.bootcss.com/less.js/2.7.3/less.min.js',
            },
          },
        ],
        parent: 'body',
      })
    )
  }

  if (argv.tsCheck && supportTypeScript) {
    config.plugins.push(
      new ForkTsCheckerWebpackPlugin({
        eslint: {
          enabled: true,
          files: [srcDir + '/**/*.{ts,tsx,js,jsx}'],
        },
        issue: {
          scope: 'all',
        },
      })
    )
  }

  return config
}