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

Loader是什么？
webpack是一个模块打包工具，模块不仅仅是js文件，还可以是图片或者是css等等其他的任何内容。
那图片和css是怎么打包的呢？
如果我们按照打包js的方式打包图片，发现会报错，这是为什么呢？
eg：const image = require('./image.jpg')

原因是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文件，还生成了一个乱码的图片

点开就是我们项目中使用的图片，在控制台打印一下

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

打印出的就是我们打包好生成的图片的文件名，指向的是该图片的地址
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：

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

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