webpack4.x 图片处理补充之压缩

1.下载安装

cnpm i image-webpack-loader -D

2.配置

	module:{ 
		//配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
		rules:[
			{
				// test 表示测试什么文件类型
				test:/\.css$/,
				// 使用 'style-loader','css-loader'
				use:ExtractTextPlugin.extract({
					fallback:'style-loader', // 回滚
					use:[
						{loader:'css-loader'},
						{loader:'postcss-loader'} //利用postcss-loader自动添加css前缀
					],
					publicPath:'../' //解决css背景图的路径问题
				})
			},
			{
				test:/\.less$/,
				use:ExtractTextPlugin.extract({ //分离less编译后的css文件
					fallback:'style-loader',
					use:['css-loader','less-loader']
				})
			},
			{
				test:/\.(sass|scss)$/,
				use:['style-loader','css-loader','sass-loader']
			},
	        {
	            test:/\.(js|jsx)$/,
	            use:['babel-loader'],
	            exclude:/node_modules/
	        },
	        {
	            test:/\.(png|jpg|gif|svg)$/,
	            use:[{
	                loader:'url-loader',
	                options:{ // 这里的options选项参数可以定义多大的图片转换为base64
	                    name: '[name].[ext]',
	                    limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
	                    outputPath:'images' //定义输出的图片文件夹
	                }
	            },
	            {	//压缩图片要在file-loader之后使用
	            	loader:'image-webpack-loader',
                    options:{
                        bypassOnDebug: true
                    }
	            }
	            ]
	        }
		]
	},