2020-11-24使用 Loader 打包静态资源（图片篇）(

使用Loader打包静态资源（图片篇）
      //图片的名字别打包成了一个很长的字符串
      //如果我们想不变动图片的名字怎么办？
      //对loader做一些额外的配置，

      webpack.config.js中
      在使用loader的时候我们可以配置一些参数，
      这些参数我们可以放在options的配置项里面，

      //1.希望打包生成的文件的名字--->跟之前图片的名字一模一样，
      //后缀也一模一样,

      这种配置的语法我们管它叫做placehoder即占位符
      //占位符有多个（webpack官方文档）

      //2.现在的图片打包到dist目录的跟目录下，
      //希望打包图片的时候，打包到一个images的文件里面，
      //配置一个outputPath的参数,

      //其实file-loader的参数非常多，
      //很多图片或者文件打包的问题，查看file-loader文档，

      module.exports = {
        module: {
          rules: [
            {
              test: /\.(jpg|png|gif)$/,
              use:{
                loader:'file-loader',
                //placeholder 占位符
                options:{
                  name:'[name].[ext]', //老的图片的名字，老的图片的后缀
                  //name:'[name]_[hash].[ext]'  //带上了hash值
                  outputPath:'images/'  //当遇到jpg|png|gif这样的文件的时候，
                                        //打包的时候把这个文件生成到dist目录下的images文件夹里
                }
              }
            
            }
          ]
        }
      }

url-loader
它完全可以实现file-loader可以实现的一切功能，
npm insatll url-loader -D   //npm insatll url-loader --save-dev
      module.exports = {
        module: {
          rules: [
            {
              test: /\.(jpg|png|gif)$/,
              use:{
                loader:'url-loader',
                options:{
                  name:'[name]_[hash].[ext]', 
                  outputPath:'images/',
                  limit:2048 // 如果你的图片大小超过2048个字节的话，                   
                }
              }
            
            }
          ]
        }
      }
      //npm run bundle
      //图片没有被打包到dist文件夹下，
      //但是index.html页面可正常显示图片，
      //查看bundle.js文件

      //eval()含有base文件
      //打开控制台，选中这张图，可以看到img中的src是base64,
      原因：当你去打包一个jpg图片的时候，用了url-loader,
            url-loader会把图片转化成base64的字符串，
            然后直接放到bundle.js里面，而不是单独生成一个图片文件，

  url-loader这么用实际上是不合理的，

  好处:图片打包带js里面，加载好了js，页面就出来了，
       不用额外的去请求一个图片的地址，省了一次http请求，

  问题：如果这个文件特别的大，打包生成的js文件就会特别的大，
        加载js的文件就会很长，所以在一开始很长的时间里面页面上什么东西都显示不出来，
  
  url-loader最佳的使用方式：
  //图片非常的小，这个图片以base64的形式打包到js文件里，
  //是一个非常好的选择，
  //没必要让一个1kb/2kb的图片发一次http请求，

  //假设这个图片很大的话，用file-loader打包到dist目录下，
  //不打包到bundle.js，这样更合适，
  //因为这样可以让bundle.js快速的加载完成，页面可以快速的显示出来，


  要想实现这种最佳实现怎么办？
  在options里面配置limit，
  limit:2048 
  如果你的图片大小超过2048个字节的话，
  就会像file-loader一样，打包到dist目录下，生成一个图片，
  图片小于2kb的时候，会直接把这个图片变成base64的字符串，
  放到bundle.js里面


  //url-loader和file-loader其实非常类似
  //只不过多了limit的配置项