webpack loader原理

原創

IIIlion

2019-05-03 12:52

在實現之前我們先來了解以下webpack的打包流程：

初始化配置對象，創建compiler對象
實例化插件，調用插件的apply方法，掛載插件的監聽
從入口文件執行編譯，按照文件類型調用相應的loader，在合適的時間調用plugin執行，並查找各個模塊的依賴
將編譯後的代碼組裝成一個個代碼塊（chunk），並安依賴和配置確定輸出內容
根據output把文件輸出到對象的目錄下

可以看出loader在webpack打包的過程中起到了至關重要的作用。

loader到底做了什麼？

由於webpack是基於Node的所以webpack只能識別.js文件，所以針對其他的文件就需要轉譯，這時候就需要用到我們的loader了。

loader是文件加載器，能夠加載資源文件，並對這些文件進行特定的處理，然後打包的指定文件中，簡單來說就是將webpack傳入的字符串做出特定的處理修改。

比如：A.less -> A.css。

loader特點

loader的執行順序和代碼書寫的順序是相反的，即：最後一個loader最先執行，第一個loader最後執行
第一個執行的loader會接收源文件做爲參數，下一次執行的loader會接收前一個loader執行的返回值做爲參數

loader編寫原則

單一原則: 每個 Loader 只做一件事；
鏈式調用: Webpack 會按順序鏈式調用每個 Loader；
統一原則: 遵循 Webpack 制定的設計規則和結構，輸入與輸出均爲字符串，各個 Loader 完全獨立，即插即用；

實現loader

需求：將.txt後綴的文件中的內容倒敘並大寫。

首先創建webpack-loader文件夾。輸入npm init -y初始化。安裝webapck和webpack-cli：npm i webpack webpack-cli -D。

在package.json文件下添加腳本

...
"scripts": {
    "build": "webpack",
    ...
}
...

創建test.txt文件夾輸入內容：hello world

創建loaders文件夾新建兩個loader：
編寫兩個loader是爲了符合單一職責原則。

// loader1，倒敘
module.exports = function (src) {
 src = src.split('').reverse().join('')
 return src;
}
// loader2，大寫
module.exports = function (src) {
   src = src.charAt(0).toUpperCase() + src.slice(1)
  // 這裏爲什麼要這麼寫？因爲直接返回轉換後的字符串會報語法錯誤，
  // 這麼寫import後轉換成可以使用的字符串
  return `module.exports = '${src}'`
 }

添加webpack.config.js配置文件

const path = require('path')

module.exports = {
  entry: {
    app: './test.txt'
  },
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: [
          './loaders/myloader2.js','./loaders/myloader1.js'
        ]
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].txt'
  }
}