2020-11-23什么是loader?（2.1）

  什么是loader?
      webpack是一个模块打包工具，
      模块不仅仅是js文件，还可以是css,图片等等其它的任何的内容，

      如何打包一个图片文件？
      webpack默认是知道如何打包处理js模块的，
      但是它不知道jpg这种文件该怎么打包，
      在配置文件中告诉webpack该怎么办？

      //当webpack在做模块打包的时候，它不知道该怎么办的时候，
      //配置文件中告诉它该怎么办,
      const path = require('path')
      module.export = {
        mode:'development',
        entry:{
          main:'./src/index.js'
        },
        module:{
          rules:[
            {
              test:/\.jpg$/,
              use:{
                loader:'file-loader'
              }
            }
          ]
        },
        output:{
          filename:'bundle.js',
          path:path.resolve(_dirname,'dist') 
        },
      } 

    npm install file-loader -D

    //打包流程  
    //src下的index.js文件，对这个文件进行打包，
    //运行npm run bundle，
    //当你在运行npm run bundle这个命令的时候，
    //实际上你在执行的是package.json里面的npm scripts,
    //运行的bundle这个命令实际上就是在运行webpack,

    //这时webpack会去找它的配置，根据它的配置帮你做打包，
    //看index.js，
    //当webpack做打包的时候，如果遇到js文件，
    //它本身默认就知道怎么处理js文件，
    //但是当它打包到jpg的时候，
    //webpack就不知道怎么办？
    //这时我们在配置文件中webpack.config.js中告诉它怎么办，

       module: {
       rules: [
         {
           test:/\.jpg$, //如果你碰到了jpg结尾文件，
           use: [
             {
               loader: 'file-loader',//你就去求助file-loader,这个loader帮你打包
             },                      //file-loader知道该怎么打包jpg这样的文件，(webpack官方文档) 
           ],
         },
       ],
     },

    file-loader实际上它底层帮我们做了几件事情，
    1.当它发现你在你的代码里面去引入了一个图片这样一个模块的时候，
      它首先会把这个模块帮助你打包移动到dist目录下，会给它改一个名字，
      当它把图片挪到dist目录下，它会得到图片的名称，或者说图片相对于
      dist目录的名称，
      然后它会把这个名称作为一个返回值，返回给我们引入模块的这个变量之中，

    //这就是file-loader它底层处理图片类型文件，打包的一个流程，
    //-----img插入

7.png 6.png

    它理论上可以处理任何静态的资源，
    index.js中
     var avatar = require('./avatar.txt')

       module: {
       rules: [
         {
          test: /\.txt$,//如果你碰到了jpg结尾文件，
           use: [
             {
               loader: 'file-loader',//你就去求助file-loader,这个loader帮你打包
             },                      //file-loader知道该怎么打包jpg这样的文件，
           ],
         },
       ],
     },

    一旦你遇到txt,file-loader就帮你去打包，怎么打包？
    第一步：遇到txt文件，把txt文件挪到dist文件下，
    第二步：把dist文件下图片的地址返回给你的变量，
    
    理论上来说，如果你在打包过程中想让某一个后缀的文件，
    移动到dist目录下，同时获得到这个文件的地址，
    那么你都可以用file-loader来处理，

    其实file-loader不是重点，
    重要的loader是什么？
    其实loader就是一个打包的方案，
    //它知道对于某一个特定的文件，webpack应该如何的进行打包，
    //本身webpack它是不知道对于一些文件该如何处理的，
    //但是loader知道，所以webpack你去求助loader就可以了,  

    //index.js文件中
    //var avatar = require('./avatar.png')
    //common.js的写法

    //ES Moudle的写法
    //import avatar from './avatar.jpg'
    // var img = new Image();
    // img.scr = avatar;
    // var root = documnet.getElemnetById('root')
    // root.append(img)

    //运行npm run bundle
    //打包成功可运行

loader的作用：
webpack不能识别非js结尾的后缀的模块，
就需要通过loader,让webpack识别出来，
怎么配置loader?
在webpack.config.js中的module中，
也就是遇到模块，符合哪个规则，
符合jpg结尾这个文件，就求助file-loader这个loader帮助
我们完成打包，
file-loader是具备处理某一个模块的能力的，
用了file-loader之后，webpack就可以正常的打包jpg这样的文件了


//index.js中添加
import Header from './header.vue'

//npm run bundle运行报错
//因为webpack不认识header.vue这个文件，
//不认识以vue结尾的文件，
//在webpack.config.js中配置，

   module: {
   rules: [
     {
       test: /\.jpg$,
       use: [
         {
           loader: 'file-loader',
         },                      
       ],
     },
     {
       test: /\.vue$,//如果你碰到了.vue结尾文件，
       use: [
         {
           loader: 'vue-loader',//你就去求助file-loader,这个loader帮你打包
         },                      //file-loader知道该怎么打包jpg这样的文件，
       ],
     },
   ],
 },
vue-loader就是帮我们webpack处理.vue这样文件的loader,
//npm install vue-loader

//这样当你在index.js中引入一个vue组件的时候，webpack也能正确的帮你引入,
//所以只要看到拟引入的模块结尾不是js,这时候
//要想到使用loader了，

8.png