Webpack4干貨分享(二)，使用loader處理scss,圖片以及轉換JS

轉載請注明出處：?葡萄城官網?，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。?
原文出處：?https://wanago.io/2018/07/16/webpack-4-course-part-two-webpack-4-course-part-two-loaders/

今天繼續我們的Webpack 4入門教程。在介紹了Webpack的基本概念之后，是時候更深入一點了。這次我們會涉及Webpack中非常強大的一個東西:loader。首先，我們會學習如何使用那些可用的loader。它將包括如何處理css、scss、圖片以及對老版本的JavaScript語言的轉換。讓我們開始吧！

Webpack 4 入門教程繼續 - 什么是loaders？

在?之前的教程?，我說Webpack是一個打包器。但這不是它僅有的目的。雖然Webpack天生只能理解JavaScript文件，但可以利用loader來改變這一點。除了能夠處理多種類型的文件，Webpack還能修改它們。

添加loader

使用loader最好的方式是在?webpack.config.js?文件中指定它們。要這么做，你需要添加?module.rules?屬性。

css-loader

css-loader?能夠翻譯引入的css文件。

npm?install?css-loader

考慮如下的配置

//?webpack.config.js
module.exports?=?{module:?{rules:?[{test:?/\.css$/,use:?'css-loader'}]}
};

rules

rules??這個屬性是一個數組，指明你的各個loader。它會作用于匹配到??test??屬性所指定規則的每一個文件。這個規則，實際上，是一個正則表達式。

use

屬性??use??指明需要對匹配的文件應用那個loader。

串聯多個loader

有了上面的代碼，你就能夠在你的JavaScript代碼中導入css文件了。（例如，使用?之前我們提到的ES6模塊?）

但這還不能讓css真正生效。我們需要一種方法讓瀏覽器能夠使用這些css。這種情況下，?style-loader?就派上用場了。

npm?install?style-loader

但那就意味著要對css文件使用兩個loader。你可以通過串聯多個loader(chaining loaders)來使它們都生效。

//?webpack.config.js
module.exports?=?{module:?{rules:?[{test:?/\.css$/,use:?['style-loader',?'css-loader']}]},
}

你可以看到，我們給了??use??屬性一個數組。一個非常重要的注意點是，串聯執行的順序是反向的（譯者注：也就是從右往左）。

/*?style.css?*/
body?{background-color:black;
}
//?index.js
import?'./style.css'

使用上面的配置，打包的工作方式大概是:

  1. Webpack嘗試解析??style.css??文件

  2. 文件名與正則表達式?/\.css$/?匹配

  3. 文件被??css-loader??編譯

  4. css-loader??處理后的結果會被傳到??style-loader

  5. 最后，?style-loader??返回一串JavaScript代碼

默認情況下，打包后的輸出是?./dist/bundle.js?。現在，這個文件包含的代碼會把所有的樣式插入到?<style>?標簽里面。如果你在HTML中引入了?bundle.js?的連接，在執行完腳本后，HTML會看起來像這樣:

<!DOCTYPE?html>
<html>
<head><meta?charset="UTF-8"><title>Webpack?App</title><style?type="text/css">body?{background-color:black;}</style></head><body><script?type="text/javascript"?src="bundle.js"></script></body>
</html>

sass-loader

有了這些知識，你可以輕松地給你的工程添加sass/scss支持了。你可以在這里使用??sass-loader?。

npm?install?sass-loader

只需要在你的loader鏈里插入它:

//?webpack.config.js
module.exports?=?{module:?{rules:?[{test:?/\.scss$/,use:?['style-loader',?'css-loader',?'sass-loader']}]},
}

就是這樣，現在你可以引入scss文件了！文件在被??css-loader??解析之前，會從scss轉譯成純css。

（譯者注: 如果安裝完sass-loader后，本地運行Webpack出現了和node-sass相關的錯誤，可嘗試再安裝一個node-sass的包解決這個問題，即?npm install node-sass?）

給loader傳入選擇項

實際上，loader可以接受一些選擇項。讓我們用??url-loader??為例來說明。

npm?install?url-loader?file-loader
//?webpack.config.js
module.exports?=?{module:?{rules:?[{test:?/\.scss$/,use:?['style-loader',?'css-loader','sass-loader']},{test:?/\.(png|jpg|gif)$/,use:?[{loader:?'url-loader',options:?{limit:?5000}}]}]}
};

注意，如果你想要給loader傳入配置項，你不再是把loader以字符串形式給??use??屬性。現在它是一個對象，包含兩個屬性:?loader?（即loader的名字），和??options?。

url-loader?會把你的圖片轉換為base64格式的URI。如果你的圖片文件很小，那么把它們直接引入到代碼中會有更好的性能。這可以減少瀏覽器所發的請求數。但是，如果你的圖片文件很大，那么把它們作為單獨的文件引入可能會更好，因為瀏覽器可以并行加載它們。

這就是為什么??url-loader??有一個??limit??屬性。它指明了一個文件大小（以byte為單位），當超過這個大小時，文件將不會被轉為base64的URI。相比較而言，?file-loader??僅僅是被用來拷貝你的文件。

body?{background-image:?url('./big-background.png');
}
.icon?{background-image:?url('./icon.png');
}

上面的配置會得到下面的結果：

<style?type="text/css">body?{background-image:?url(ca3ebe0891c7823ff1e137d8eb5b4609.png);?}
.icon?{background-image:?url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAALElEQVR4AWMYIWAU1FPLoP9AXEFI0QEi8H+YYdQyqIEaXuumRhh1DZdUMwoATlYWfwh9eYkAAAAASUVORK5CYII=);?}
</style>

因為?big-background.png?比限制的大小更大，它被拷貝至?dist?文件夾，并被起了一個隨機的名字。而相反，?icon.png文件被轉換為了base64 URI。

使用babel轉譯JavaScript

另一個流行的loader是??babel-loader?。它允許你使用?Babel?轉譯JavaScript文件。它解決了如何使用最新版本的JavaScript來編寫代碼的問題。如果你想支持老版本的瀏覽器，或者想使用現代瀏覽器還沒有實現的功能，Babel都能夠幫到你。

npm?install?babel-loader?@babel/core?@babel/preset-env

（譯者注：原文的babel-core和babel-preset-env依賴被替換為@babel/core和@babel/preset-enve，因為新版本的Babel7中對官方提供的依賴使用了命名空間@babel）

module.exports?=?{module:?{rules:?[{test:?/\.js$/,exclude:?/(node_modules)/,use:?{loader:?'babel-loader',options:?{presets:?['@babel/preset-env']}}}]}
};

注意到，我們這里使用了??exclude??屬性，它也是一個?正則表達式?。如果任何文件與這個表達式相匹配，它將不會被轉譯。

這里有很多預置項可以滿足你的需求。查閱?Babel的官方文檔?，你可以在那里找到它們的列表。

總結

這一次我們學習了Webpack很有用的一個功能：loader。我們介紹了一些可用的loader。利用它們，我們在項目中添加上了對scss的支持。此外，我們還學習如何使用??url-loader??處理圖片。另外一個loader的常用之處是我們討論的利用Babel轉譯JavaScript。在教程未來的部分，我們會深入到loader中，包括寫一個我們自己的loader。

關于葡萄城：

賦能開發者！葡萄城公司成立于 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。


本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/450577.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/450577.shtml
英文地址，請注明出處：http://en.pswp.cn/news/450577.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

spring-data-jpa 介紹 復雜查詢，包括多表關聯，分頁，排序

spring-data-jpa 介紹 復雜查詢，包括多表關聯，分頁，排序

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 本篇進行Spring-data-jpa的介紹&#xff0c;幾乎涵蓋該框架的所有方面&#xff0c;在日常的開發當中&#xff0c;基本上能滿足所有需求。…
閱讀更多...
重寫laravel的request的校驗器

重寫laravel的request的校驗器

protected function failedValidation(Validator $validator) {$error $validator->errors()->all();throw new HttpResponseException(response()->json([data>[],code>500,msg>$error[0]], 500)); }
閱讀更多...
如何檢測C語言中的內存漏洞(leak)?

如何檢測C語言中的內存漏洞(leak)?

在動態分配的內存單元(即由函數malloc()或ealloc()分配的內存單元)不再使用卻沒有被釋放的情況下&#xff0c;會出現內存漏洞。未釋放內存單元本身并不是一種錯誤&#xff0c;編譯程序不會因此報告出錯&#xff0c;程序也不會因此而立即崩潰。但是&#xff0c;如果不再使用而又…
閱讀更多...
Oracle中row_number()、rank()、dense_rank() 的區別

Oracle中row_number()、rank()、dense_rank() 的區別

link:https://www.cnblogs.com/qiuting/p/7880500.html轉載于:https://www.cnblogs.com/Spring-Rain/p/9716213.html
閱讀更多...
Vim使用教程(按鍵教程，映射都可以改的，持續更新)

Vim使用教程(按鍵教程，映射都可以改的，持續更新)

修改映射 tnvim .vimrc 1、spaceft 調出目錄 2、controlh 跳到目錄 3、controll 跳到內容頁 4、spacekn 運行最近一個測試 5、spacekf 運行整個測試文件 6、spacekl 運行最后一個測試 7、sv 分屏 8、sq 退出分屏 9、controlp 搜索功能 10、/搜索內容 N向上…
閱讀更多...
Alpha 沖刺五

Alpha 沖刺五

團隊成員 051601135 岳冠宇051604103 陳思孝031602629 劉意晗031602248 鄭智文031602234 王淇會議照片 項目燃盡圖 項目進展 暫無實質性進展。 項目描述 問題困擾&#xff1a; 商品分類出現困惑。交互部分向服務器發送請求失敗&#xff0c;安卓在4.0后對網絡請求有限制要求&…
閱讀更多...
什么是換碼符(escape character)?

什么是換碼符(escape character)?

換碼符是用來執行一個命令或一項任務的字符&#xff0c;它們不會被打印到屏幕上。例如&#xff0c;一個換碼符可以是這樣一個字符&#xff0c;它被傳遞給一個設備&#xff0c;告訴計算機屏幕以紅色而不是通常的白色來顯示下一行。這個換碼符將和真正要被設備以紅色來顯示的字符…
閱讀更多...
java日期工具類DateUtil

java日期工具類DateUtil

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 DateUtil類 [java] view plain copy package com.util; import java.text.SimpleDateFormat; import java.util.ArrayList; import…
閱讀更多...
Command 傳參的幾種方式

Command 傳參的幾種方式

Command可以根據CommandParameter傳參 關鍵代碼 public ICommand SubmitCommand > _submitCommand; private RelayCommand _submitCommand new RelayCommand(new Action<object>(ShowMessage)); private static void ShowMessage(object obj) {MessageBox.Show(obj.T…
閱讀更多...
phpStorm重構快捷鍵（mac系統、持續更新）

phpStorm重構快捷鍵（mac系統、持續更新）

參考 https://learnku.com/laravel/t/5420/your-keyboard-shortcuts-please 1、ctrlaltf 將表達式提取出來使其成為類的屬性&#xff0c;并自動更新引用。 2、ctrlaltp 將表達式變成由參數傳入 3、crtlF6 修改函數簽名&#xff08;函數名&#xff0c;函數參數&#xff09…
閱讀更多...
python -m xxx.py和python xxx.py的區別

python -m xxx.py和python xxx.py的區別

先看下python -m site作用是顯示sys.path的值內容&#xff0c;也就是python搜索模塊的目錄&#xff0c;作用類似于linux下的PATH python -m SimpleHTTPServer 會在sys.path的所有路徑下查找SimpleHTTPServer.py文件&#xff1b; 而python SimpleHTTPServer.py則是在當前查找文…
閱讀更多...
C語言多維數組與多級指針

C語言多維數組與多級指針

多維數組與多級指針也是初學者感覺迷糊的一個地方。超過二維的數組和超過二級的指針其實并不多用。如果能弄明白二維數組與二級指針&#xff0c;那二維以上的也不是什么問題了。所以本節重點討論二維數組與二級指針。一、二維數組 1、假想中的二維數組布局我們前面討論過&…
閱讀更多...
spring-data-jpa 使用

spring-data-jpa 使用

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 只是記錄下使用方法 &#xff1a; 1. RPC接口 service實現類調用&#xff0c;PageRequest對象會實現分頁、排序。 Overridepublic Obj…
閱讀更多...
docker的安裝與安裝mysql(mac,centos為例)

docker的安裝與安裝mysql(mac,centos為例)

一、mac安裝docker 1、去這個網站下載安裝https://www.docker.com/get-started 2、運行docker 運行開啟docker docker run -dp 80:80 docker/getting-started 二、centos8安裝docker 1、安裝docker 下載低版本的 yum install -y docker-ce --nobest 2、安裝擴展 wget http…
閱讀更多...
配置PPPOE

配置PPPOE

先配置服務端PPPOE-Server先為路由添加一個賬號為PPP所使用[PPPOE-Server]aaa [PPPOE-Server-aaa]local-user test password cipher 123 //添加一個本地賬號[PPPOE-Server-aaa]local-user test service-type ppp//設置test賬號類型為PPP賬號[PPPOE-Server]ip pool test//添加一…
閱讀更多...
eclipse棄坑記第一篇之在idea上配置Tomcat環境并創建Javaweb項目的詳細步驟原創

eclipse棄坑記第一篇之在idea上配置Tomcat環境并創建Javaweb項目的詳細步驟原創

IntelliJ IDEA是一款功能強大的開發工具&#xff0c;在代碼自動提示、重構、J2EE支持、各類版本工具(如git、svn、github)、maven等方面都有很好的應用。 IntelliJ IDEA有免費的社區版和付費的旗艦版。免費版只支持Java等為數不多的語言和基本的IDE特性&#xff0c;旗艦版還支持…
閱讀更多...
laravel安裝prettier，git hook代碼格式化工具

laravel安裝prettier，git hook代碼格式化工具

1、安裝prettier的php擴展 npm install --global prettier prettier/plugin-php 2、安裝husky&#xff0c;lint-staged&#xff08;git鉤子&#xff09;使用 npm i prettier lint-staged husky -D 3、修改package.json文件 在scripts后面添加兩個函數 "husky": …
閱讀更多...
C語言指針數組和數組指針

C語言指針數組和數組指針

一、指針數組和數組指針的內存布局 初學者總是分不出指針數組與數組指針的區別。其實很好理解&#xff1a;指針數組&#xff1a;首先它是一個數組&#xff0c;數組的元素都是指針&#xff0c;數組占多少個字節由數組本身決定。它是“儲存指針的數組”的簡稱。 數組指針&#xf…
閱讀更多...
求二叉樹的高度

求二叉樹的高度

1 int GetHeight(BinTree BT)2 {3 int HL, HR, MaxH;4 5 if(BT)6 {7 HL GetHeight(BT->Left); //求左子樹的高度8 HR GetHeight(BT->Right); //求右子樹的高度9 MaxH (HL > HR) ? HL : HR; //取左右子樹較大的高…
閱讀更多...
Json與List的相互轉換

Json與List的相互轉換

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 問題由來&#xff1a; 最近由于做一個項目&#xff0c;項目的一個功能就是根據Listview的內容生成一個二維碼&#xff0c;然后掃描二維…
閱讀更多...
最新文章

Copyright @ 2022~2023