const path = require('path')
const { whenProd, getPlugin, pluginByName } = require('@craco/craco')
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')

module.exports = {
  // 修改webpack
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    plugins:{
      add: [new AntdDayjsWebpackPlugin()]
    },
    configure: webpackConfig => {
      whenProd(() => {
        // 只在生产环境（build）可以对webpack配置进行修改，配置cdn
        // 1. 排除这些包不要打包到build文件夹中
        webpackConfig.externals = {
          'react': 'React',
          'react-dom': 'ReactDOM',
          'redux': 'Redux',
        }
        // 2. 需要在index.html中引入被排除的包 HtmlWebpackPlugin
        const { isFound, match } = getPlugin(webpackConfig, pluginByName('HtmlWebpackPlugin'))
        if ( isFound ) {
          match.userOptions.cdn = {
            js: [
              'https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js',
              'https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js',
              'https://cdn.bootcdn.net/ajax/libs/redux/4.1.0/redux.min.js'
            ],
            css: []
          }
        }
      })
      return webpackConfig
    }
  }
}