Webpack實戰(四):教教你如何輕鬆搞定-前處理器(loader)
前面三節,我主要給大家分享了有關webpack的一些配置的知識點,如何打包js檔案,而如果我們遇到其他型別的資源如圖片、css、字型font等等,我們該如何處理呢?今天會介紹前處理器(loader),它賦予了Webpack可處理不同資源型別的能力,極大豐富了其可擴充套件性。
如果想了解Webpack的基礎配置可以參考以下地址:
Webpack實戰(一):Webpack打包工具安裝及引數配置
Webpack實戰(二):webpack-dev-server的介紹與用法
Webpack實戰(三):作為前端你不得不懂的Webpack資源入口和出口的配置
在一個專案中,我們要面臨著各種各樣的資源,如何讓Webpack很好的處理這些資源呢?這個時候我們需要藉助於前處理器(loader),loader的字面意思是裝載器,在Webpack中它的實際功能則更像是前處理器。Webpack本身只認識JavaScript,對於其他型別的資源必須預先定義一個或多個loader對其進行轉譯,輸出為Webpack能夠接收的形式再繼續進行,因此loader做的實際上是一個預處理的工作。
loader配置
- loader引入
如果我們要引入css檔案,webpack是沒法處理的,如
// common.css
body {
font-size: 20px;
background: #0fc;
}
//index.js
import './common.css'
執行的結果如上圖,由此可見,Webpack是無法處理css檔案,我們需要給安裝預處理css-loader。安裝步驟如下
npm install --save-dev css-loader
然後我們將loader 引入專案中,配置webpack.config.js配置如下:
const path = require('path') module.exports = { context: path.join(__dirname, './src'), entry: { index: './index.js' }, output: { path: path.join(__dirname, 'dist'), filename: 'index.js' }, mode: 'development', module: { rules: [ { test: /\.css$/i, use: [ 'css-loader'], }, ], } }
與loader相關的配置都在module物件中,其中module.rules代表了模組的處理規則。每條規則內部可以包含很多配置項,這裡我們只使用了最重要的兩項—test和use。
- test可接收一個正則表示式或者一個元素為正則表示式的陣列,只有正則匹配上的模組才會使用這條規則。 如以/.css$/來匹配所有以.css結尾的檔案。
- use可接收一個數組,陣列包含該規則所使用的loader,也可以是字串,物件等。
很多時候,在處理某一類資源時我們都需要使用多個loader。如,對於SCSS型別的資源來說,我們需要sass-loader來處理其語法,並將其編譯為CSS;接著再用css-loader處理CSS的各類載入語法;最後使用style-loader來將樣式字串包裝成style標籤插入頁面。
下面引入style-loader,安裝命令如下:
npm install --save-dev style-loader
配置程式碼如下:
const path = require('path')
module.exports = {
context: path.join(__dirname, './src'),
entry: {
index: './index.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js'
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
}
}
此時再進行打包,樣式就會生效了,應該會看到頁面中插入了一個style標籤,包含了CSS檔案的樣式,這樣我們就完成了從JS檔案載入CSS檔案的配置。
打包效果如下圖:
執行效果如下圖
把style-loader放在css-loader前面,這是因為在Webpack打包時是按照陣列從右邊往左邊的順序將資源交給loader處理的,因此要把最後生效的放在左邊。
loader作為前處理器通常會給開發者提供一些配置項,在引入loader的時候可以通過options將它們傳入
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader',
{
loader: 'css-loader',
options: {
// 有關css-loader的配置
}
}
],
},
],
}
- 其他配置
exclude與include是用來排除或包含指定目錄下的模組,可接收正則表示式或者字串(檔案絕對路徑),以及由它們組成的陣列
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
exclude: /node_modules/
},
],
}
exclude規則內的使node_modules中的模組不會執行這條規則。該配置項通常是必加的,否則可能拖慢整體的打包速度。
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
include: /src/
},
],
}
include代表該規則只對正則匹配到的模組生效。假如我們將include設定為工程的原始碼目錄,自然而然就將node_modules等目錄排除掉了。
如果exclude 和include同時存在,則exclude許可權比較高
resource與issuer可用於更加精確地確定模組規則的作用範圍,在Webpack中,我們認為被載入模組是resource,而載入者是issuer
module: {
rules: [
{
use: ['style-loader', 'css-loader'],
resource: {
test: /\.css$/i,
exclude: /node_modules/
},
issuer: {
test: /\.js$/i,
exclude: /node_modules/
}
},
],
}
通過新增resource物件來將外層的配置包起來,區分了resource和issuer中的規則,這樣就一目瞭然了。
enforce用來指定一個loader的種類,只接收“pre”或“post”兩種字串型別的值。事實上,我們也可以不使用enforce而只要保證loader順序是正確的即可。配置enforce主要的目的是使模組規則更加清晰,可讀性更強,尤其是在實際工程中,配置檔案可能達到上百行的情況,難以保證各個loader都按照預想的方式工作,使用enforce可以強制指定loader的作用順序。
常用的前處理器
- babel-loader用來處理ES6+並將其編譯為ES5,它使我們能夠在工程中使用最新的語言特性,同時不必特別關注這些特性在不同平臺的相容問題。
npm install babel-loader babel-core babel-preset-env
- babel-loader:它是使Babel與Webpack協同工作的模組。
- babel-core:顧名思義,它是Babel編譯器的核心模組。
- babel-preset-env:它是Babel官方推薦的預置器,可根據使用者設定的目標環境自動新增所需的外掛和補丁來編譯ES6+程式碼。
配置檔案如下:
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: [
[
'env', {
modules: false
}
]
]
}
}
}
由於babel檔案很大沒,所以要排除node_modules|bower_components
對於babel-loader本身我們添加了cacheDirectory配置項,它會啟用快取機制,在重複打包未改變過的模組時防止二次編譯,同樣也會加快打包的速度
babel-loader支援從.babelrc檔案讀取Babel配置,因此可以將presets和plugins從Webpack配置檔案中提取出來,也能達到相同的效果。
- ts-loader
ts-loader與babel-loader的性質類似,它是用於連線Webpack與Typescript的模組,安裝命令如下:
npm install ts-loader typescript
webapck.config.js配置如下
rules: [
{
test: /\.ts$/,
use:'ts-loader'
}
]
- html-loader
html-loader用於將HTML檔案轉化為字串並進行格式化,這使得我們可以把一個HTML片段通過JS載入進來。 - handlebars-loader
handlebars-loader用於處理handlebars模板,在安裝時要額外安裝handlebars。 - file-loader
file-loader用於打包檔案型別的資源,並返回其publicPath。
總結
有關Webpack前處理器(loader)就暫時分析到這裡,這僅代表個人觀點,歡迎拍磚,如想了解更多請掃描下面:
相關推薦
Webpack實戰(四):教教你如何輕鬆搞定-前處理器(loader)
前面三節,我主要給大家分享了有關webpack的一些配置的知識點,如何打包js檔案,而如果我們遇到其他型別的資源如圖片、css、字型font等等,我們該如何處理呢?今天會介紹前處理器(loader),它賦予了Webpack可處理不同資源型別的能力,極大豐富了其可擴充套件性。 如果想了解Webpack的基礎配
JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案(三):兩個Viewmodel搞定增刪改查
前言:之前博主分享過knockoutJS和BootstrapTable的一些基礎用法,都是寫基礎應用,根本談不上封裝,僅僅是避免了html控制元件的取值和賦值,遠遠沒有將MVVM的精妙展現出來。最近專案打算正式將ko用起來,於是乎對ko和bootstraptable做了一些封裝,在此分享出來供園友們參考。封裝
一起來學SpringBoot | 第二十三篇:輕鬆搞定重複提交(分散式鎖)
SpringBoot 是為了簡化 Spring 應用的建立、執行、除錯、部署等一系列問題而誕生的產物,自動裝配的特性讓我們可以更好的關注業務本身而不是外部的XML配置,我們只需遵循規範,引入相關的依賴就可以輕易的搭建出一個 WEB 工程 在 一起來學S
一起來學SpringBoot | 第二十六篇:輕鬆搞定安全框架(Shiro)
SpringBoot 是為了簡化 Spring 應用的建立、執行、除錯、部署等一系列問題而誕生的產物,自動裝配的特性讓我們可以更好的關注業務本身而不是外部的XML配置,我們只需遵循規範,引入相關的依賴就可以輕易的搭建出一個 WEB 工程 Shiro 是
一起來學SpringBoot | 第十九篇:輕鬆搞定資料驗證(一)
SpringBoot是為了簡化Spring應用的建立、執行、除錯、部署等一系列問題而誕生的產物,自動裝配的特性讓我們可以更好的關注業務本身而不是外部的XML配置,我們只需遵循規範,引入相關的依賴就可以輕易的搭建出一個 WEB 工程 對於任何一個
redis之20分鐘輕鬆搞定springCache快取(單機+叢集)
redis之20分鐘輕鬆搞定springCache快取(單機+叢集) 原文地址:https://m.baidu.com/from=1013843a/bd_page_type=1/ssid=0/uid=0/pu=sz%401321_1002%2Cta%40utouch_2_7.0_2_7.3%2Cu
`輕鬆搞定資料結構(線性表篇)
資料結構(線性表) 相關的C/C++基礎知識 typedef 語句的使用 //①宣告一個結構體,或者為 一個型別修改名字方便理解。 typedef struct xxx{ int xxxx; }newN
Apache Storm系列 之二( 輕鬆搞定 Storm 安裝與啟動)
Storm 是開源免費的分佈實時計算系統(Apache Storm is a free and open source distributed realtime computation system)。這裡提到了兩個關鍵詞: 分散式 實時 1、分散式意味著
遭遇Crash檔案戰:教你如何搞定iOS崩潰日誌
請叫我背景 最近在提交應用到App Store的時候,竟然被拒了兩次。那時候心裡的想法是,尼瑪完蛋了,要被老闆開除了,我是不是要失業了。於是乎那兩週幾乎毛腦子都是為什麼Apple你這麼狠心,我們明明相愛了那麼多年,你竟然就這樣拋棄了我。我不想活了,不要攔著我,我要分分
Excel表格太大,無法同時列印在一張紙上?一鍵幫你輕鬆搞定!
不知道大家在列印Excel表格時候有沒有遇到這樣的一個問題,表格太大了無法同時列印在一張紙上?這時候只能將表格的部分內容打印出來,著實令人感到頭痛! 這時候有的朋友為了將Excel表格列印在一張紙張,硬生生的將表格寬度縮小,這樣的大大的影響了表格的外觀! 那麼如何才能將Excel表格列印在一張紙上呢?這裡
抖音怎麼上傳照片圖集?抖音照片視訊怎麼製作?大神教你輕鬆搞定!
抖音怎麼上傳照片圖集?抖音照片視訊或照片圖集怎麼製作?現在抖音上很多那種照片或圖片做成的短視訊,主題好,有音樂,還有文字或好看的切換效果。今天就請大神來教大家簡單幾步,輕鬆做一個好看的抖音照片圖集!教程用到的製作照片圖片的工具是數碼大師,大家可以先看看做好的抖音照片圖集效果: 下面就是製
程式收藏不看系列:一文輕鬆搞定系統限流
1. 我們為什麼需要限流 為了“反脆弱”,在微服務複雜拓撲的情況下,限流是保障服務彈性和拓撲健壯的重中之重。 想一想,如果業務推出了一個秒殺活動,而你沒有任何的限流措施;當你搭建了一個賬號平臺,而完全沒有對十幾個業務方設定流量配額……這些很有可能在特定場合下給你的產品帶來大量的業務損失和口碑影響。 我們通
Webpack實戰(八):教你搞懂webpack如果實現程式碼分片(code splitting)
2020年春節已過,本來打算回鄭州,卻因為新型冠狀病毒感染肺炎的疫情公司推遲了上班的時間,我也推遲了去鄭州的時間,在家多陪娃幾天。以前都是在書房學習寫部落格,今天比較特殊,抱著電腦,在樓頂晒著太陽,陪著家人,寫著部落格。 前面的幾篇文章主要告訴大家如何安裝、配置webpack、webpack實現樣式分離
Python爬蟲視訊教程:教你爬取QQ音樂資料(實戰處理+資料視覺化)-劉宇宙-專題視訊課程...
Python爬蟲視訊教程:教你爬取QQ音樂資料(實戰處理+資料視覺化)—704人已學習 課程介紹 本視訊課程主要培訓Python爬蟲入門,資料分析及資料視覺化實戰內容,通過本課的學習,您可以在2小時左右掌握Python基礎程式設計的核心內容,實現Python在爬
第四課:通過配置文件獲取對象(Spring框架中的IOC和DI的底層就是基於這樣的機制)
ted const dex generate stat clas name 必須 nbsp 首先在D盤創建一個文件hero.txt,內容為:com.hero.Hero(此處必須是Hero的完整路徑) 接下來是Hero類 package com.hero; publi
【小說連載】網絡紅顏(一):當你遇到一個不收錢的出租車司機
網絡 美女 職場 生活 小說 簡介:這是一段描寫網絡工程師生活的故事。故事中沒有英雄,沒有勵誌,也沒有所謂的雞湯文化和狼性文化。有的,或許是一種對技術的執著,對愛情的渴望或者是對名利的一種追求,但又能追求到什麽呢?聲明:本故事所出現的人名,公司名均為虛構,如有雷同恰屬巧合小說將在本站博客和
省錢小貼士(ECS):教你如何每年省出8w+ 塊
配置 存儲 摘要: 隨著用戶越來越多地使用阿裏雲的ECS服務,如何用最小的成本來保有ECS,成為用戶越來越重要的關註點。為了更好的服務客戶,ECS團隊調整了系統盤的最小容量限制。 隨著用戶越來越多地使用阿裏雲的ECS服務,如何用最小的成本來保有ECS,成為用戶越來越重要的關註點。 變更點 為了更好的服
概率論與數理統計(一):教你一步步推貝葉斯公式
參考資料:《概率論與數理統計》 陳希孺 2000.3/2016.8 1,概率是什麼? 概率是表示某種情況出現的可能性大小的一種數量指標,它介於0和1之間。 概
[譯]MVC網站教程(四):MVC4網站中整合jqGrid表格外掛(系列完結)
目錄 1.介紹 2.軟體環境 介紹 “MVC網站教程”系列的目的是教你如何使用 ASP.NET MVC 建立一個基本的、可擴充套件的網站。 4)MVC網站教程(四):MVC4網站中整合jqGrid表格外掛(涉及技術:AJAX,JSON,jQue
WebKit開發實戰(一):在WPF中使用WebKit控制元件(含示例程式碼)
WebKit 是一個開源的瀏覽器引擎,可以用於程式內建瀏覽器的開發。開發時,需要將WebKit的相關檔案都拷貝至專案檔案,方便程式設計時呼叫,實現WebKit的功能。 在WPF中使用WebKit時,需要新增以下引用。 新增好引用後,就可以在WPF中使用WebKit控