/* craco.config.js */
const CracoLessPlugin = require('craco-less');
const WebpackBar = require('webpackbar')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')

module.exports = {
  devServer: {
    host: "localhost",
    client: {
      progress: true,
    },

  },
  webpack: {
    cache: true,
    configure: (webpackConfig, { env, paths }) => {
      //webpackConfig.stats = 'errors-only'//这样才会生效
      // 修改build的生成文件名称
      paths.appBuild = 'dist';
      webpackConfig.output = {
        ...webpackConfig.output,
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
      }//修改输出为dist文件
      // console.log(webpackConfig);//不懂怎样修改的可以看一下webpackConfig有啥，然后对它的一直配置进行修改。
      return webpackConfig
    },
    plugins: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            drop_debugger: true,
            //清楚console
            drop_console: true,
          },
        },
        sourceMap: false,
        parallel: true,
      }),
      /* new BundleAnalyzerPlugin(), */
      new WebpackBar({
        profile: true,
        color: '#fa8c16',
      })
    ],
    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
            chunks: 'initial',
            minChunks: 2, maxInitialRequests: 5,
            minSize: 0
          },
          vendor: {
            test: /node_modules/,
            chunks: 'initial',
            name: 'vendor',
            priority: 10,
            enforce: true
          }
        }
      }
    }
  },
  plugins: [

    {
      plugin: CracoLessPlugin,
      options: {
        sourceMap: false,
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#008060' },
            javascriptEnabled: true,
          },
        },
      },
    }
  ],
};