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
                    }
              }
              ]
  
    ]
  },