webpack_（第三章）_核心概念_loader

矫情吗；* 2022-01-12 07:37 257阅读 0赞

Loader是什么？  
webpack是一个模块打包工具，模块不仅仅是js文件，还可以是图片或者是css等等其他的任何内容。  
那图片和css是怎么打包的呢？  
如果我们按照打包js的方式打包图片，发现会报错，这是为什么呢？  
eg：`const image = require('./image.jpg')`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]  
原因是webpack只知道默认打包js模块，但是不知道如何打包类似于jpg这种文件的打包，所以在配置文件中要配置这种文件如何打包，module的作用就是配置模块如何打包。

module.exports = {
      mode: "production",
      module: {
        rules: [
          {
            test: /\.jpg$/,
            use: {
              loader: "file-loader"
            }
          }
        ]
      },
      .......

在module中配置一个rules属性，是一个数组，可以有很多条规则。  
rules的写法是固定的，`test： /\.jpg/` 假设我们打包的文件是以jpg结尾的，使用loader来帮助我们做打包  
`use：{ loader： ‘file-loader’}` 意思是使用file-loader来帮我们打包jpg结尾的文件，我们需要安装file-loader这个工具，在命令行执行`npm install file-loader -D`, 就可以正常打包jpg文件了  
打开dist文件，发现除了生成一个index.js文件，还生成了一个乱码的图片  
![在这里插入图片描述][20190621150016481.png]  
点开就是我们项目中使用的图片，在控制台打印一下

const image = require('./image.jpg')
    console.log(image)

![在这里插入图片描述][20190621151016874.png]  
打印出的就是我们打包好生成的图片的文件名，指向的是该图片的地址  
file-loader： 帮助我们打包图片这种文件  
打包流程：当在代码中发现了引用图片的模块的时候，首先会把这个模块打包移动到dist目录下。会改一个名字（这个名字是可以自定义的）。当得到图片的名称（文件的地址），会把这个名称（文件的地址）当成一个返回值返回给我们引入模块的变量之中。  
事实上file-loader可以处理任何静态的文件，包括png、jpg、gif、excel、txt等等  
所以我们在打包的过程中，想要某个文件移动到dist文件下，同时获得文件的地址，都可以用file-loader来处理。  
所以loader是什么？  
loader是一个打包的方案，对于某一个特定的文件，webpack应该如何的去打包，本身webpack是不知道一些文件的处理的，但是loader知道，所以webpack求助于loader就可以了

const image = require('./image.jpg')
    var img = new Image();
    img.src = image    // image 指向的是图片的地址
    var root = document.getElementById('root')
    root.append(img)

就显示出来图片了  
综上，webpack不能识别非js结尾的模块，那就需要loader来识别，怎么配置loader呢，就是在webpac.config.js文件中配置module定义，符合哪个规则，就求助于该配置的loader完成打包。  
如果是打包vue结尾的文件呢，同样在webpack.config.js配置module：  
![在这里插入图片描述][20190621162320661.png]

{
            test: /\.vue$/,
            use: {
              loader: "vue-loader"
            }
          }

然后安装`npm install vue-loader -D` 就可以正确的引入vue了  
所以当我们看到只要不是js结尾的模块，第一点就要想到引入loader了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]: /images/20220109/5ab605e22e184d8eac96f4e75f4bfe40.png
[20190621150016481.png]: /images/20220109/609e8b85928d4c24868d704a09d5773c.png
[20190621151016874.png]: /images/20220109/b246065698354de8bf1d6d634856f7e0.png
[20190621162320661.png]: /images/20220109/d428041e6fa64464a4a7d9f76f3a7c28.png