節我們來學習 webpack 中 loader 加載器的使用，那么什么是 loader 呢。從本質上來說，loader 就是一個 Node.js 模塊，在 webpack 的定義中，loader 導出一個函數，loader 會在轉換源模塊的時候調用該函數。

webpack 本身依然是只能處理 JS 文件的，但是通過一系列的 loader ，就可以處理其他文件啦。例如 Less 和 Sass，以前我們編譯這些 CSS 預處理器，需要使用 gulp 進行編譯，而顯示可以通過 webpack 中的 loader 加載器來實現。

常見loader

webpack 中有一系列的 loader，在實際項目中，我們會根據不同的需求使用到不同的 loader。例如 webpack 中的一些常見 loader 如下所示：

• css-loader ： 用于處理 css 文件，使得能在 js 文件中引入使用。
• style-loader ： 用于將 css 文件注入到 index.html 中的 <style> 標簽上。
• less-loader：處理 less 代碼。
• sass-loader： 處理 sass 代碼。
• postcss-loader：用 postcss 來處理 CSS代碼。
• babel-loader：用 babel 來轉換 ES6 文件到 ES5。
• file-loader：打包圖片，打包字體圖標。
• url-loader：和 file-loader 類似，但是當文件小于設定的 limit 時，可以返回一個 DataUrl（提升網頁性能）。
• html-withimg-loader：打包 HTML 文件中的圖片。
• eslint-loader：用于檢查常見的 JavaScript 代碼錯誤，也可以進行"代碼規范"檢查。

loader的安裝和配置

我們可以在 webpack.config.js 配置文件中配置 loader，可以在 module.rules 中指定一個或多個 loader。

通過配置loader 的兩個屬性來實現：

• test 屬性：用來標識出應該被對應的 loader 進行轉換的某個或多個文件。
• use 屬性：表示轉換時要用哪個 loader。

示例：

例如默認情況下 webpack 只能打包 JS 文件，不能識別其他例如 CSS、Less、image等類型的文件，那么如果我們想要打包 CSS 樣式文件，可以在 webpack 中使用 loader 加載器，可以將一種文件轉換為另一種文件，將webpack不能識別的其它類型文件轉換為 webpack 可識別 JS 類型文件。

首先需要安裝 style-loader 和 css-loader ，安裝命令如下所示：

npm install css-loader style-loader --save-dev

命令執行成功后，這兩個 loader 會自動添加到 package.json 的依賴中，如下所示：

"devDependencies": {
    "css-loader": "^3.6.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0"
  }

然后在 webpack.config.js 中配置 loader，在 module 屬性的 rule 屬性中配置 loader 規則：

module:{
    rules:[{
        test:/.css$/,
        use:['style-loader','css-loader']
    }]
}

這里表示匹配所有 .css 后綴結尾的文件，通過 style-loader 和 css-loader 加載器進行轉換后再編譯。

然后我們創建一個 xkd.css 文件，內容如下所示：

p{
    font-size: 12px;
    color: red;
}

并將 xkd.css 文件導入到 index.js 入口文件中：

document.write('你好，俠課島！');

// 導入 CSS 文件
import "./xkd.css";

然后我們執行打包命令后會重新生成打包文件，會發現 xkd.css 文件也成功打包到 bundle.js 文件中。

這就是 loader 的基本使用流程，先安裝loader，然后在配置文件中配置 loader ，最后再進行打包就可以啦。

loader 特性

• loader 支持鏈式調用，鏈中的每個 loader 會將轉換應用在已處理過的資源上。一組鏈式的 loader 將按照相反的順序執行。鏈中的第一個 loader 將其結果傳遞給下一個 loader，依此類推。
• loader 可以是同步的，也可以是異步的。
• loader 運行在 Node.js 中，并且能夠執行任何操作。
• loader 也可以內聯顯示指定。
• loader 可以通過 options 對象配置。
• 除了常見的通過 package.json 的 main 來將一個 npm 模塊導出為 loader，還可以在 module.rules 中使用 loader 字段直接引用一個模塊。
• 插件(plugin)可以為 loader 帶來更多特性。
• loader 能夠產生額外的任意文件。

者： 秋天不落葉

轉發鏈接：https://mp.weixin.qq.com/s/KmDLcJ0jhB667ZouDB8tyg