FangCode/Font/config/plugin.config.js

// Change theme plugin

import MergeLessPlugin from 'antd-pro-merge-less'
// import AntDesignThemePlugin from 'antd-theme-webpack-plugin'
import path from 'path'

import LodashModuleReplacementPlugin from 'lodash-webpack-plugin'
import CompressionPlugin from 'compression-webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'

function getModulePackageName(module) {
  if (!module.context) return null

  const nodeModulesPath = path.join(__dirname, '../node_modules/')
  if (module.context.substring(0, nodeModulesPath.length) !== nodeModulesPath) {
    return null
  }

  const moduleRelativePath = module.context.substring(nodeModulesPath.length)
  const [moduleDirName] = moduleRelativePath.split(path.sep)
  let packageName = moduleDirName
  // handle tree shaking
  if (packageName.match('^_')) {
    // eslint-disable-next-line prefer-destructuring
    packageName = packageName.match(/^_(@?[^@]+)/)[1]
  }
  return packageName
}

export default config => {
  // pro 和 开发环境再添加这个插件
  if (process.env.APP_TYPE === 'site' || process.env.NODE_ENV !== 'production') {
    // 将所有 less 合并为一个供 themePlugin使用
    const outFile = path.join(__dirname, '../.temp/ant-design-pro.less')
    const stylesDir = path.join(__dirname, '../src/')

    config.plugin('merge-less').use(MergeLessPlugin, [
      {
        stylesDir,
        outFile
      }
    ])

    // config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
    //   {
    //     antDir: path.join(__dirname, '../node_modules/antd'),
    //     stylesDir,
    //     varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
    //     mainLessFile: outFile, //     themeVariables: ['@primary-color'],
    //     indexFileName: 'index.html',
    //     generateOne: true,
    //     lessUrl: 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js'
    //   }
    // ])
  }

  // 这里的作用是改css的名称为乱码
  /*
    // 这里的作用是讲config输出，然后会看到extract-css，然后再修改filename、chunkFilename
    const temp = config.toString({
      ...config.toConfig(),
      module: {
        defaultRules: [
          {
            use: [
              {
                loader: 'banner-loader',
                options: { prefix: 'banner-prefix.txt' },
              },
            ],
          },
        ],
      },
    })
    console.log(temp)
    */

  config.output.filename('[name].bundle.[hash:8].js')
  config.output.chunkFilename('[chunkhash:8].chunk.js')

  config.plugin('extract-css').use(
    new MiniCssExtractPlugin({
      filename: '[name].[hash:8].css',
      chunkFilename: '[id].[hash:8].css'
    })
  )

  // 开启gzip
  if (process.env.NODE_ENV === 'production') {
    // 开启gzip
    config.plugin('compression-webpack-plugin').use(
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css$/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false // 不删除源文件
      })
    )
  }

  // https://github.com/lodash/lodash-webpack-plugin#feature-sets
  // 这里会报“predicate is not a function ”，如果不添加的话
  config.plugin('lodash-webpack-plugin').use(
    new LodashModuleReplacementPlugin({
      shorthands: true,
      collections: true,
      paths: true
    })
  )

  // https://github.com/Beven91/webpack-ant-icon-loader
  // code split @ant-design/icons
  // config.module
  //   .rule('@ant-design/icons')
  //   .include.add(require.resolve('@ant-design/icons/lib/dist'))
  //   .end()
  //   .use('ant-icon')
  //   .loader('webpack-ant-icon-loader')

  config.module
    .rule('svg')
    .include.add(/.svg$/)
    .end()
    .exclude.add(/goldfish\.svg/)
    .end()
    .test(/\.svg(\?v=\d+\.\d+\.\d+)?$/)
    .use('babel')
    .loader('babel-loader')
    .end()
    .use('url-loader')
    .loader('url-loader')
    .end()
    .use('@svgr/webpack')
    .loader('@svgr/webpack')
    .options({
      babel: false
    })
    .options({
      icon: true
    })

  // optimize chunks
  // https://github.com/ant-design/ant-design-pro/blob/master/config/plugin.config.js
  // config.optimization.splitChunks({
  //   cacheGroups: {
  //     styles: {
  //       name: '[chunkhash:8].css',
  //       test: /\.(css|less)$/,
  //       chunks: 'async',
  //       minChunks: 1,
  //       minSize: 0,
  //     },
  //   },
  // });
}