UMI中打包优化config配置

` const ESLintPlugin = require('eslint-webpack-plugin'); const StylelintPlugin = require('stylelint-webpack-plugin'); // const ErudaWebpackPlugin = require('eruda-webpack-plugin'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); const CompressionPlugin = require("compression-webpack-plugin");

// const px2rem = require('postcss-px2rem-exclude');

// px2rem({ // remUnit: 75, exclude: /node_modules/i // }); const chainWebpack = (config: { plugin: any; module: any; toConfig: any; merge: any; cache: any }, { webpack }: any) => {

/** ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ CSS Modules 必需以 .module.less 结尾, 其他 .less 文件不走 css module 编译  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
const webpackConfig = config.toConfig();

config.module.rule('less').oneOf('css').use('css-loader').options({
	modules: false,
	// sourceMap: true,
	importLoaders: 1,
});

config.module
	.rule('less')
	.oneOf('module-loader')
	.before('css')
	.use('mini-css-extract-plugin')
	.loader('mini-css-extract-plugin')
	.options(webpackConfig.module.rules[9].oneOf[1].use[0].options)
	.end()
	.use('css-loader')
	.loader('css-loader')
	.options({
		importLoaders: 1,
		modules: true,
		localIdentName: '[name]__[local]___[hash:base64:5]',
	})
	.end()
	.use('postcss-loader')
	.loader('postcss-loader')
	.options(webpackConfig.module.rules[9].oneOf[1].use[2].options)
	.end()
	.use('less-loader')
	.loader('less-loader')
	.options(webpackConfig.module.rules[9].oneOf[1].use[3].options)
	.end();

config.module
	.rule('less')
	.oneOf('module-loader')
	.include.add(/(.*\\.module).*\\.(css|s[ac]ss|less|styl)\\b/);

/** ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ CSS Modules必需以.module.less结尾, 其他.less文件不走css module编译  ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */

config.module.rule('otf').test(/.otf$/).use('file-loader').loader('file-loader');
config.module
	.rule('xlsx')
	.test(/.xlsx$/)
	.use('file-loader')
	.loader('file-loader');

config.plugin('eslint-webpack-plugin').use(ESLintPlugin, [
	{
		extensions: ['tsx', 'ts'],
	},
]);

config.plugin('stylelint-webpack-plugin').use(StylelintPlugin, [
	{
		extensions: ['less'],
	},
]);

config.plugin('fork-ts-checker-webpack-plugin').use(ForkTsCheckerWebpackPlugin, [{}]);

// Gzip压缩
config.plugin('compression-webpack-plugin').use(CompressionPlugin, [
	{
		algorithm: 'gzip',
		test: /\.(js|css|html)$/i, // 匹配
		threshold: 10240, // 超过10k的文件压缩
		deleteOriginalAssets: false, // 是否删除源文件
		minRatio: 1,//默认为0.8，能压缩到小于等于原来的80%才压缩，其实有些文件压缩反而变大的
	},
]);
config.merge({
	optimization: {
		minimize: true,
		splitChunks: {
			chunks: 'async',
			minSize: 30000,
			minChunks: 1,
			automaticNameDelimiter: '.',
			cacheGroups: {
				lfpantdesigns: {
					name: 'antdesigns',
					chunks: 'all',
					test: /[\\/]node_modules[\\/](@antv|antd|@ant-design)/,
					priority: 10,
				},
				lfpvendors: {
					name: 'vendors',
					chunks: 'all',
					test: /[\\/]node_modules[\\/](lodash|moment|react|dva|postcss|mapbox-gl)/,
					priority: 10,
				},
				lfpcommons: {
					name: 'commons',
					// 其余同步加载包
					chunks: 'all',
					minChunks: 2,
					priority: 1,
					// 这里需要注意下，webpack5会有问题， 需加上这个 enforce: true，
					// refer: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/257#issuecomment-432594711
					enforce: true,
				},
			},
		},
	},
});
config.cache({
	type: 'filesystem',
	allowCollectingMemory: true,
	buildDependencies: {
		config: [__filename],
	},
});

// config.plugin('eruda-webpack-plugin').use(ErudaWebpackPlugin, [{}]);

}

export default chainWebpack; `