JS每日一題：Webpack有哪些常見的Loader？他們是解決什麼問題的？
摘要：
20190326期
Webpack有哪些常見的Loader？他們是解決什麼問題的？
在回答之前我們先來了解一下Loader
我們在上一節講過，webpack是屬於模組化方案，他能讓任意型別的檔案都能執行在瀏覽器中，怎麼做到呢？這時就有了loader
定義: 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點推送當天的參考答案
- 注 絕不僅限於完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路