JS每日一題：Webpack有哪些常見的Loader？他們是解決什麼問題的？

20190326期

Webpack有哪些常見的Loader？他們是解決什麼問題的？

在回答以前咱們先來了解一下Loader

咱們在上一節講過，webpack是屬於模塊化方案，他能讓任意類型的文件都能運行在瀏覽器中，怎麼作到呢？這時就有了loader

定義: loader 用於對模塊的源代碼進行轉換。loader 可使你在 import 或"加載"模塊時預處理文件。

沒太明白? 看下示例可能更清淅

module.exports = {
  module: {
    rules: [
      // 將全部TypeScript 轉爲 JavaScript，
      // 也就意味着咱們使用ts來開發，最終轉換成js運行在瀏覽器端
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

經常使用的loader

這裏其實沒什麼太大意義，無非是想請大家親自去看看本身項目到底用了哪些loader而已, 下面簡單列出一些

• style-loader 將css添加到DOM的內聯樣式標籤style裏
• css-loader 容許將css文件經過require的方式引入，並返回css代碼
• less-loader 處理less
• sass-loader 處理sass
• postcss-loader 用postcss來處理CSS
• autoprefixer-loader 處理CSS3屬性前綴，已被棄用，建議直接使用postcss
• file-loader 分發文件到output目錄並返回相對路徑
• url-loader 和file-loader相似，可是當文件小於設定的limit時能夠返回一個Data Url
• html-minify-loader 壓縮HTML
• babel-loader 用babel來轉換ES6文件到ES5

loader特性

不少同窗偏向於使用，不會去在乎loader的一些小細節, 這裏就順帶說一下

• loader 從右到左地取值(evaluate)/執行(execute)
• loader 支持鏈式傳遞,鏈中的每一個 loader 會將轉換應用在已處理過的資源上
• loader 也能夠內聯顯示指定
• loader 能夠是同步的，也能夠是異步的
• loader 運行在 Node.js 中，而且可以執行任何 Node.js 能作到的操做
• loader 能夠經過 options 對象配置
• 除了常見的經過 package.json 的 main 來將一個 npm 模塊導出爲 loader，還能夠在 module.rules 中使用 loader 字段直接引用一個模塊
• loader 可以產生額外的任意文件

看了其特性後，咱們再看來一組簡單的demo進行加深印象

// 內聯使用
import Styles from 'style-loader!css-loader?modules!./styles.css'

// 下面的一組loader就是鏈式傳遞, 從 sass-loader 開始執行，而後繼續執行 css-loader，最後以 style-loader 爲結束
use: [
  { loader: 'style-loader' },
  {
    loader: 'css-loader',
    // 經過options配置
    options: {
      modules: true,
      minimize:true,
    }
  },
  { loader: 'sass-loader' }
]

總結

• loader是webpack核心,用於對模塊的源代碼進行轉換
• loader支持鏈式調用，從右至左執行，支持同步或異步函數

關於JS每日一題

JS每日一題能夠當作是一個語音答題社區
天天利用碎片時間採用60秒內的語音形式來完成當天的考題
羣主在第二天0點推送當天的參考答案

• 注 毫不僅限於完成當天任務，更可能是查漏補缺，學習羣內其它同窗優秀的答題思路

點擊加入答題