记react中antd打包的坑体积太大和className命名

前端使用antd的时后打包体积太大， 如图1.6M还是挺大的，把antd所有的资源都加载进入了

根据antd 官网的推荐，按需加载方式居于.babel配置

这样再来看看打包分析的

按需加载打包了button和layout 在src文件下也只引用了这个两个组件

这样做很方便的，同时要在entry这里在添加一个antd就不对了, 又把整个antd打包进来了， 这样就不对了

entry: {
		app: ['./src/js/index.js'],	//入口文件
		antd: ['antd']
	},

写到这里还有个问题在用到了css-loader中localIdentName 属性时，要避免antd的css类名被修改

var cssLoader = {
		loader: 'css-loader',
		options: {
			localIdentName: '[local]--[hash:base64:6]'
		}
	}

就需要用loader 中的 exclude 和include 来出来，这两个属性都需要用上

{
  test: /\.css$/,
  exclude: /node_modules/,
  use: [
    'style-loader'
  ]
},
{
  test: /\.css$/,
  include: /src/,
  use: [
    'style-loader'
  ]
}

具体做法如下

// booLocal 是否使用原来的class， /node_modules/中
exports.cssLoaders = function (options, booLocal) {
	options = options || {}
	var cssLoader = {
		loader: 'css-loader',
		options: {
			minimize: process.env.NODE_ENV === 'production',
			sourceMap: options.sourceMap,
			modules: true,
			localIdentName: booLocal ? '[local]' : '[local]--[hash:base64:6]',
		}
	}

	// generate loader string to be used with extract text plugin
	function generateLoaders(loader, loaderOptions) {
		var loaders = [cssLoader];
		if (loader) {
			loaders.push({
				loader: loader + '-loader',
				options: Object.assign({}, loaderOptions, {
					sourceMap: options.sourceMap
				})
			})
		}
		if (options.extract) {
			return ExtractTextPlugin.extract({
				use: loaders,
				publicPath: '../../', //解决 build css bg img 加载路径不对问题
			    fallback: 'react-style-loader' 
			})
		} else {
			return ['react-style-loader'].concat(loaders)
		}
	}

	return {
		css: generateLoaders(),
		postcss: generateLoaders('postcss'),
		less: generateLoaders('less'),
		sass: generateLoaders('sass', { indentedSyntax: true }),
		scss: generateLoaders('sass'),
		stylus: generateLoaders('stylus'),
		styl: generateLoaders('stylus')
	}
}

exports.styleLoaders = function (options) {
	var output = []
	var loaders = exports.cssLoaders(options, false)
	var loadersLocal = exports.cssLoaders(options, true)
	
	for (var extension in loaders) {
		var loader = loaders[extension]
		var loaderLocal = loadersLocal[extension]
		
		output.push(
			{
				test: new RegExp('\\.' + extension + '$'),
				use: loaderLocal,
				include: /node_modules/,
			},{
				test: new RegExp('\\.' + extension + '$'),
				use: loader,
				exclude: /node_modules/,
			}
		)
	}
	return output
}

这src 里的class 重新命名就防止了与/node_modules/中引用的混合