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了