img图片在webpack中使用

HTML中使用<img>标签

![](../../image/alarmLevel/cleared_round_5ecc49.png)
复制代码

JS中使用require加载图片模块

const imgUrl  =  require('../../image/theme/light/nav/alarm.svg');
复制代码

注意：路径必定要是相对路径

image-webpack-loader对比较大的图片进行压缩

依赖 url-loader、img-loader安装

cnpm install img-loader --save-dev
cnpm install --save-dev url-loader
复制代码

安装image-webpack-loader

cnpm install image-webpack-loader --save-dev
复制代码

webpack.config.js：

{
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)$/i,
        use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000 , /* 图片大小小于1000字节限制时会自动转成 base64 码引用*/
                name: '[path][name].[ext]?[hash:6]!./dir/file.png'
              }
            },
            /*对图片进行压缩*/
            {
              loader: 'image-webpack-loader',
              query: {
                progressive: true,
                optimizationLevel: 7,
                interlaced: false,
                pngquant: {
                  quality: '65-90',
                  speed: 4
                }
              }
            }
          // {
          //   loader:'url-loader?limit=5000&name=[path][name].[ext]?[hash:6]!./dir/file.png'
          // }
        ]
}
复制代码

效果：

小于10kb的图片

大的图片压缩