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

Hanks10100 發布于2019-08-23 16:28 / 2958人閱讀

摘要：期有哪些常見的他們是解決什么問題的在回答之前我們先來了解一下我們在上一節講過，是屬于模塊化方案，他能讓任意類型的文件都能運行在瀏覽器中，怎么做到呢這時就有了定義用于對模塊的源代碼進行轉換。

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點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點擊加入答題

GPU云服務器云服務器 ecs常見的問題都有哪些常見的域名有哪些 rds常見問題有哪些云主機常見問題有哪些

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103070.html

JS每日一題:Webpack有哪些常見的Plugin？他們是解決什么問題的

摘要：期有哪些常見的他們是解決什么問題的定義音譯過來就是插件在中插件目的在于解決無法實現的其他事插件是一個具有屬性的對象。 20190327期 Webpack有哪些常見的Plugin？他們是解決什么問題的定義: 音譯過來就是插件, 在webpack中, 插件目的在于解決 loader 無法實現的其他事 webpack 插件是一個具有 apply 屬性的 JavaScript 對象。appl...

songze 2019-08-23 16:31 評論0 收藏0
JS每日一題:Webpack如何實現一個Loader？

摘要：期如何實現一個我們在上幾節有講過今天我們來深入了解它們最暴力的方式莫過于動手實現它們好了，回到正題先來回顧一下定義用于對模塊的源代碼進行轉換。可以使你在或加載模塊時預處理文件簡單使用是導出為一個函數的模塊。 20190329期如何實現一個Loader？我們在上幾節有講過loader,今天我們來深入了解它們,最暴力的方式莫過于動手實現它們好了，回到正題, 先來回顧一下loader ...

HollisChuang 2019-08-26 13:42 評論0 收藏0
我的前端面試

摘要：前言這次找工作也面了好幾家公司，也通過了好幾家公司的面試，畢竟之前也準備了一段時間，所以面試的時候心里也不是很虛。的代碼分割怎么實現的說說剛才提到的和的區別前端緩存怎么實現扯扯強緩存和協商緩存，重點問了如何實現緩存二面就聊了項目。。。前言這次找工作也面了好幾家公司，也通過了好幾家公司的面試，畢竟之前也準備了一段時間，所以面試的時候心里也不是很虛。這里記錄一下面試過程中被問到的問題...

meteor199 2019-08-26 13:29 評論0 收藏0
JS每日一題：Vue-router有哪些鉤子？使用場景？

摘要：問有哪些鉤子使用場景的實現可以點這里前面我們用大白話講過什么是鉤子，這里在重復一下，就是在什么什么之前什么什么之后英文叫專業點叫生命周期，裝逼點可以叫守衛中也存在鉤子的概念分為三步記憶全局守衛路由獨享守衛組件獨享守衛全局守衛很好理解，全 20190218問 Vue-router有哪些鉤子？使用場景？ router的實現可以點這里前面我們用大白話講過什么是鉤子，這里在重復一下，就是在...

張金寶 2019-08-23 15:18 評論0 收藏0
JS每日一題: 前端的緩存有哪些？都適用什么場景？區別是什么？

摘要：問前端的緩存有哪些都適用什么場景區別是什么參考回答前端緩存分為兩部分緩存瀏覽器緩存緩存強緩存強緩存主要是采用響應頭中的和兩個字段進行控制的值理解指定設置緩存最大的有效時間單位為指定響應會被緩存，并且在多用戶間共享響應只作為私有的緩存， 20190116問: 前端的緩存有哪些？都適用什么場景？區別是什么？參考回答前端緩存分為兩部分: http 緩存瀏覽器緩存 http 緩存強...

MockingBird 2019-08-30 15:55 評論0 收藏0