3.2.3 webpack图片等资源的处理 file-loader|url-loader|img-loader

            file-loader
            //
            能够正确引入图片，直接引入图片会报错
            
                
url-loader
            //
            包含file-loader，在此基础上增加了图片转base64等功能  
            
                
img-loader
            //
            处理图片专用，图片的压缩等功能
        

{ // 图片
    test: /\.(png|jpg|jpeg|gif)$/,
    use: [
       {
         loader: ‘file-loader‘
       }
    ]
}  

处理完成的名字 都是一长串的hash，，如何给hash命名？ -- 需要file-loader的配置

{ // 图片
    test: /\.(png|jpg|jpeg|gif)$/,
    use: [
       {
         loader: ‘file-loader‘,
         options: {
            //[hash].[ext] -- 默认name: ‘[name].[hash:4].[ext]‘, //.[ext]文件类型后缀，，png|jpg|...         }
       }
    ]
} 

{ // 图片
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: ‘file-loader‘,
            options: {
              //[hash].[ext] -- 默认
              name: ‘[name].[hash:4].[ext]‘, //.[ext]文件类型后缀，，png|jpg|... outputPath: ‘assets/img‘, //图片相对于dist目录的输出路径  dist下面的 -asset下的 -img下 publicPath: ‘aaaaaaaaaaaaaa‘, //告诉你资源应该去哪找，决定引用路径，，，js也有            }
          }
        ]
} 

            use: [
      {
            loader: 
            ‘url-loader‘,
            //
            将资源转换成 base64
                        options: {
              
            //
            [hash].[ext] -- 默认
              name: ‘[name].[hash:4].[ext]‘, //.[ext]文件类型后缀，，png|jpg|...
              outputPath: ‘assets/img‘, //图片相对于dist目录的输出路径  dist下面的 -asset下的 -img下
              publicPath: ‘assets/img‘, //告诉你资源应该去哪找limit: 5000//不设置limit，一张图片都没有打包，，全部将图片转成 base64，设置为5000，图片可以成功打包/**
               * 为什么要把图片转成base64？ 可以减少资源请求
               * 为什么要设置大小？ 如果图片很大，css体积过大，下载较慢，首屏加载效果体验差 ，，，浏览器正常可以异步加载
               * 建议设置为5000，即小于5kb的可以转换成base64，大于5kb的采用异步加载
               */
            }
      }
]

            {
            loader:‘img-loader‘, //img-loader本身没有任何作用，功能是靠options中配置一系列插件来完成            options: {
              /**
               * imagemin
               * imagemin-pngquant imagemin-mozjepg imagemin-gifsicle
               */
              plugins: [
                require(‘imagemin-pngquant‘)({
                  speed: 2 //1-11  压缩的程度，值越大，压缩损失 越小,,一般选取2-4之间                }),
                require(‘imagemin-mozjpeg‘)({
                  quality: 80 //1-100，，一般选取60-80                }),
                require(‘imagemin-gifsicle‘)({
                  optimizationLevel: 1 //1,2,3 越大压缩越狠                })
              ]
            }
}

            app.js

 import img1 from "./assets/img/img1.png";
 var img =new Image(); //不能直接写路径,imh-loader不会处理，必须import进来
 img.src=img1;
 document.getElementById(‘mydiv‘).appendChild(img);

            <!--
             
    同样，不能直接写入路径，webpack不会处理
    webpack中可以在html里面写模板字符串ejs
　　需要注意插件版本 file-loader 4.2、4.1版本
　　模板字符串

            -->
            <
            img 
            src
            ="${require(‘./assets/img/img4.jpg‘)}"
            />

        

                new htmlWebpackPlugin({
      filename:"index.html",
      template:"./src/index.html",
      aa: 11111
})
            

<img src="./assets/img/img4.jpg"/>
{ //html-loader
    test: /\.html$/,
    use: {
        loader: ‘html-loader‘
    }
}
// 问题：图片懒加载，将路径写在data-src下
<img src=‘‘ data-src="./assets/img/img4.jpg"/>
{ //html-loader
        test: /\.html$/,
        use: {
          loader: ‘html-loader‘,
          options: {
            attrs: ["img: data-src","video: aaa"] //对img下的data-src属性进行处理，对video下的aaa属性进行处理          }
        }
} 

            /*
            
1、拼图
2、我们的css得去定位图片  -- 根据原图大小定位，，导致图片定位不完美
3、不完美-没有完美的雪碧图  -- 除非是完美定制的图片

            */
        

            {
    loader:"postcss-loader",
    options:{
          plugins: [
                require(‘postcss-sprites‘)()
          ]
    }
}

const webpackSpriteSmith=require(‘webpack-spritesmith‘)
new webpackSpriteSmith({
      src: { //来源
        cwd: path.join(__dirname,"src/assets/img"),//配置路径，对该路径下的文件进行处理
        glob: "*.jpg" //处理的图片类型      },
      target: { //打包到哪
        image: path.join(__dirname, ‘dist/assets/sprites/sprites.png‘),//生成图片的路径
        css: path.join(__dirname, ‘dist/assets/sprites/sprites.css‘),//生成css的路径      },
      apiOptions: { //告诉去哪找图
        cssImageRef: ‘./sprites/sprites.png‘
      }
})

            //
             所有的资源处理都是一个样   
==》 定义test规则  -->  使用url-loader或者file-loader  -->  规划路径
<video src="./assets/video/dx.mp4"></video>
{ //html-loader
        test: /\.html$/,
        use: {
          loader: ‘html-loader‘,
          options: {
            attrs: ["img: data-src","video: src"] //对img下的data-src属性进行处理，对video下的src属性进行处理          }
        }
      },
      {
        test: /\.pm4$/,
        use: {
          loader: ‘url-loader‘, //会自动转换为base64,,同样可以使用limit不转换视频
        }
}