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的圖片

大的圖片壓縮