成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Hanks10100 / 3015人閱讀

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

20190326期

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

在回答之前我們先來(lái)了解一下Loader

我們?cè)谏弦还?jié)講過，webpack是屬于模塊化方案，他能讓任意類型的文件都能運(yùn)行在瀏覽器中，怎么做到呢？這時(shí)就有了loader

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

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

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

這里其實(shí)沒什么太大意義，無(wú)非是想請(qǐng)你們親自去看看自己項(xiàng)目到底用了哪些loader而已, 下面簡(jiǎn)單列出一些

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來(lái)處理CSS

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

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

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

html-minify-loader 壓縮HTML

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

loader特性

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

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

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

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

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

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

loader 可以通過 options 對(duì)象配置

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

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

看了其特性后，我們?cè)倏磥?lái)一組簡(jiǎn)單的demo進(jìn)行加深印象

// 內(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核心,用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換

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

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

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

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

點(diǎn)擊加入答題

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103070.html

相關(guān)文章

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

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

    songze 評(píng)論0 收藏0

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

    摘要：期如何實(shí)現(xiàn)一個(gè)我們?cè)谏蠋坠?jié)有講過今天我們來(lái)深入了解它們最暴力的方式莫過于動(dòng)手實(shí)現(xiàn)它們好了，回到正題先來(lái)回顧一下定義用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換?？梢允鼓阍诨蚣虞d模塊時(shí)預(yù)處理文件簡(jiǎn)單使用是導(dǎo)出為一個(gè)函數(shù)的模塊。 20190329期 如何實(shí)現(xiàn)一個(gè)Loader？ 我們?cè)谏蠋坠?jié)有講過loader,今天我們來(lái)深入了解它們,最暴力的方式莫過于動(dòng)手實(shí)現(xiàn)它們 好了，回到正題, 先來(lái)回顧一下loader ...

    HollisChuang 評(píng)論0 收藏0

  • 我的前端面試

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

    meteor199 評(píng)論0 收藏0

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

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

    張金寶 評(píng)論0 收藏0

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

    摘要：?jiǎn)柷岸说木彺嬗心男┒歼m用什么場(chǎng)景區(qū)別是什么參考回答前端緩存分為兩部分緩存瀏覽器緩存緩存強(qiáng)緩存強(qiáng)緩存主要是采用響應(yīng)頭中的和兩個(gè)字段進(jìn)行控制的值理解指定設(shè)置緩存最大的有效時(shí)間單位為指定響應(yīng)會(huì)被緩存，并且在多用戶間共享響應(yīng)只作為私有的緩存， 20190116問: 前端的緩存有哪些？都適用什么場(chǎng)景？區(qū)別是什么？ 參考回答 前端緩存分為兩部分: http 緩存 瀏覽器緩存 http 緩存 強(qiáng)...

    MockingBird 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<