成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Hanks10100 / 2969人閱讀

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

20190326期

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

在回答之前我們先來了解一下Loader

我們在上一節(jié)講過，webpack是屬于模塊化方案，他能讓任意類型的文件都能運行在瀏覽器中，怎么做到呢？這時就有了loader

定義: loader 用于對模塊的源代碼進行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時預(yù)處理文件。

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

module.exports = {
  module: {
    rules: [
      // 將所有TypeScript 轉(zhuǎn)為 JavaScript，
      // 也就意味著我們使用ts來開發(fā)，最終轉(zhuǎn)換成js運行在瀏覽器端
      { test: /.ts$/, use: "ts-loader" }
    ]
  }
};
常用的loader

這里其實沒什么太大意義，無非是想請你們親自去看看自己項目到底用了哪些loader而已, 下面簡單列出一些

style-loader 將css添加到DOM的內(nèi)聯(lián)樣式標(biāo)簽style里

css-loader 允許將css文件通過require的方式引入，并返回css代碼

less-loader 處理less

sass-loader 處理sass

postcss-loader 用postcss來處理CSS

autoprefixer-loader 處理CSS3屬性前綴，已被棄用，建議直接使用postcss

file-loader 分發(fā)文件到output目錄并返回相對路徑

url-loader 和file-loader類似，但是當(dāng)文件小于設(shè)定的limit時可以返回一個Data Url

html-minify-loader 壓縮HTML

babel-loader 用babel來轉(zhuǎn)換ES6文件到ES5

loader特性

很多同學(xué)偏向于使用，不會去在意loader的一些小細節(jié), 這里就順帶說一下

loader 從右到左地取值(evaluate)/執(zhí)行(execute)

loader 支持鏈?zhǔn)絺鬟f,鏈中的每個 loader 會將轉(zhuǎn)換應(yīng)用在已處理過的資源上

loader 也可以內(nèi)聯(lián)顯示指定

loader 可以是同步的，也可以是異步的

loader 運行在 Node.js 中，并且能夠執(zhí)行任何 Node.js 能做到的操作

loader 可以通過 options 對象配置

除了常見的通過 package.json 的 main 來將一個 npm 模塊導(dǎo)出為 loader，還可以在 module.rules 中使用 loader 字段直接引用一個模塊

loader 能夠產(chǎn)生額外的任意文件

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

// 內(nèi)聯(lián)使用
import Styles from "style-loader!css-loader?modules!./styles.css"

// 下面的一組loader就是鏈?zhǔn)絺鬟f, 從 sass-loader 開始執(zhí)行，然后繼續(xù)執(zhí)行 css-loader，最后以 style-loader 為結(jié)束
use: [
  { loader: "style-loader" },
  {
    loader: "css-loader",
    // 通過options配置
    options: {
      modules: true,
      minimize:true,
    }
  },
  { loader: "sass-loader" }
]
總結(jié)

loader是webpack核心,用于對模塊的源代碼進行轉(zhuǎn)換

loader支持鏈?zhǔn)秸{(diào)用，從右至左執(zhí)行，支持同步或異步函數(shù)

關(guān)于JS每日一題

JS每日一題可以看成是一個語音答題社區(qū)
每天利用碎片時間采用60秒內(nèi)的語音形式來完成當(dāng)天的考題
群主在次日0點推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點擊加入答題

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103070.html

相關(guān)文章

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

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

    songze 評論0 收藏0

  • JS每日一題:Webpack如何實現(xiàn)一個Loader？

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

    HollisChuang 評論0 收藏0

  • 我的前端面試

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

    meteor199 評論0 收藏0

  • JS每日一題：Vue-router有哪些鉤子？使用場景？

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

    張金寶 評論0 收藏0

  • JS每日一題: 前端的緩存有哪些？都適用什么場景？區(qū)別是什么？

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

    MockingBird 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<