webpack 打包图片 webpack-html-withimg-loade-打包html图片 image-webpack-loader 、img-loader svg雪碧图

1、webpack-html-withimg-loader（打包html中的图片）

(1)什么是html-withimg-loader

file-loader或者url-loader：只能打包css、js中的图片；
html-withimg-loader：打包html中的图片。

(2)html-withimg-loader使用

https://www.npmjs.com/package/html-withimg-loader

安装：

npm install html-withimg-loader --save

配置：

{
     test: /\.(htm|html)$/i,
     loader: 'html-withimg-loader'
},

(3)如打包后路径出现问题，在url-loader的配置中加上 esModule: false。

2、webpack-图片压缩(image-webpack-loader 、img-loader）

压缩图片：

https://www.npmjs.com/package/image-webpack-loader
https://www.npmjs.com/package/img-loader

安装：

npm install image-webpack-loader --save-dev
npm install img-loader --save-dev

配置：

// 打包图片规则
   {
      test: /\.(png|jpg|gif)$/,
      use: [
              {
                 loader: 'url-loader',
                 options: {
                    // 指定图片限制的大小
                    limit: 1024,
                    // 指定打包后文件名称
                    name: '[name].[ext]',
                    // 指定打包后文件存放目录
                    outputPath: 'images/',
                  }
               },
               {
                  loader: 'image-webpack-loader',
                   options: {
                      mozjpeg: {  //压缩jpeg图片
                         progressive: true,
                         quality: 65
                      },
                      optipng: {   //压缩png
                          enabled: false,  //禁用optipng 
                      },
                      pngquant: {     //压缩png
                          quality: [0.65, 0.90],
                          speed: 4
                      },
                      gifsicle: {    //压缩gif
                          interlaced: false,
                      },
                      webp: {    // 将JPG 和 PNG 图像压缩为 WEBP
                          quality: 75
                      }
                    }
               },
        ]
 },

3、webpack-图片路径问题

(1)webpack打包图片路径问题
webpack打包之后给我们的都是相对路径，但是正是因为是相对路径, 所以会导致在html中使用的图片能够正常运行, 在css中的图片不能正常运行。例如: 打包之后的路径是 images/lnj.jpg，那么在html中, 会去html文件所在路径下找images,正好能找到所以不报错，但是在css中, 会去css文件所在路径下找images, 找不到所以报错。
(2)解决方案
在开发阶段将publicPath设置为dev-server服务器地址
在上线阶段将publicPath设置为线上服务器地址

 // 打包图片规则
{
     test: /\.(png|jpg|gif)$/,
     use: [
        {
           loader: 'url-loader',
           options: {
               // 指定图片限制的大小
               limit: 1024,
               // 指定打包后文件名称
               name: '[name].[ext]',
               // 指定打包后文件存放目录
               outputPath: 'images/',
               publicPath: "http://127.0.0.1:9090/dist/images"
            }
         },
      ]
},

4、svg-sprite-loader（svg雪碧图，自制图标的使用）

svg-sprite-loader 将加载的 svg 图片拼接成 雪碧图，放到页面中，其它地方通过 复用。
安装：

npm i -D svg-sprite-loader

配置：

 {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]',
        },
        include: [path.resolve(__dirname, '../src/assets/svg/src')],
      },