// https://github.com/arackaf/customize-cra#with-mobx
const path = require('path');
const webpackMerge = require('webpack-merge');
const appSrc = path.join(__dirname, './src');
const {
	addDecoratorsLegacy,
	disableEsLint,
	useBabelRc,
	override,
	fixBabelImports,
	addLessLoader,
	addWebpackAlias
} = require('customize-cra');
const utilsConfig = require('./src/utils/config');
//打包分析
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// 这里可以直接修改 Host 或者 Port
// process.env.HOST = 'localhost.xxxx.com';
// process.env.PORT = 4100;

// 生产环境是否打包 Source Map
process.env.GENERATE_SOURCEMAP = false;

module.exports = {
	// 配置devServer
	devServer: (configFun) => (proxy, allowedHost) => {
		proxy = {
			'/mock': {
				// 这里配置代理服务地址
				target: 'http://localhost:3000/',
				changeOrigin: true,
				pathRewrite: { '^/mock': '' }
			}
		};
		// allowedHost： 添加额外的地址
		const config = configFun(proxy, allowedHost);
		config.quiet = false;
		return config;
	},

	// 配置webpack
	webpack: (config, env) => {
		// 开发环境
		const isEnvDevelopment = env === 'development';
		// 生产环境
		const isEnvProduction = env === 'production';

		// 通过customize-cra插件覆盖
		config = override(
			// 配置路径别名
			addWebpackAlias({ '@': appSrc }),
			// 对Decorators支持
			addDecoratorsLegacy(),
			disableEsLint(),
			useBabelRc(),
			fixBabelImports('import', {
				libraryName: 'antd',
				libraryDirectory: 'es',
				style: true // change importing css to less
			}),
			addLessLoader({
				javascriptEnabled: true,
				modifyVars: utilsConfig.lessModifyVars
			})
		)(config, env);

		return webpackMerge(config, {
			// 用户可以在这里添加自定义的config配置 来增加修改loader, plugin, optimization
			plugins: [
				//new BundleAnalyzerPlugin()
			],
			optimization: {
				splitChunks: {
					chunks: 'initial', // 默认作用于异步chunk，值为 all/initial/async/function(chunk)
					minSize: 30000, // 表示在压缩前的最小模块大小,默认值是30kb
					minChunks: 1, // 表示被引用次数，默认为1；
					maxAsyncRequests: 5, // 所有异步请求不得超过5个
					maxInitialRequests: 3, // 初始话并行请求不得超过3个
					automaticNameDelimiter: '~', // 名称分隔符，默认是~
					name: true, // 打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔
					cacheGroups: {
						// 设置缓存组用来抽取满足不同规则的chunk
						vendor: {
							name: 'vendor',
							chunks: 'initial', // 同外层的参数配置，覆盖外层的chunks，以chunk为维度进行抽取
							priority: 10, // 优先级
							reuseExistingChunk: false, // 如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
							test: /node_modules\/(.*)\.js/ // 以module为维度进行抽取
						},
						styles: {
							name: 'styles',
							test: /\.(scss|css)$/,
							chunks: 'all',
							minChunks: 20,
							reuseExistingChunk: true,
							enforce: true
						}
					}
				}
			}
		});
	},

	// 配置测试
	jest: (config) => {
		config.moduleNameMapper = {
			// 同webpack一样配置别名
			'@/(.*)$': '<rootDir>/src/$1'
		};
		return config;
	}
};