webpack的CSS加載器的使用
什么是loader
loader用于轉(zhuǎn)換應(yīng)用程序的資源文件,他們是運(yùn)行在nodejs下的函數(shù),使用參數(shù)來(lái)獲取一個(gè)資源的來(lái)源并且返回一個(gè)新的來(lái)源(資源的位置),例如:你可以使用loader來(lái)告訴webpack去加載一個(gè)coffeeScript或者Babel文件。
loader的解析
loader的解析類(lèi)似模塊,一個(gè)loader模塊會(huì)導(dǎo)出一個(gè)方法并且可被nodejs寫(xiě)為可兼容的JavaScript,通常情況下通過(guò)npm來(lái)管理loader,但你也可以把loader放在自己的應(yīng)用里。
webpack中常用的加載器
css-loader 處理css中路徑引用等問(wèn)題
用于在js中加載css,解釋@import和url()
options
alias: 解析別名
importLoaders(@import): 在css-loader前應(yīng)用的loader的數(shù)目,默認(rèn)為0
Minimize: true or false 是否開(kāi)啟css代碼壓縮,比如壓縮空格不換行
modules: 是否開(kāi)啟css-module
module.exports = { ... module: { rules: [{ test: /\.css$/, use: ['style-loader', { loader: 'css-loader', options: {//當(dāng)css文件中又引用了其他的css的時(shí)候,需要設(shè)置importLoaders importLoaders: 1 } }] }] } };
style-loader 動(dòng)態(tài)把樣式寫(xiě)入css
加載的css作為style標(biāo)簽內(nèi)容插入到html中,以<style></style>形式在html頁(yè)面中插入css代碼
options
insertAt: 插入位置
insertInto: 插入到指定的dom
singleton: true or false,多個(gè)樣式是否只生成一個(gè)<style></style>標(biāo)簽
postcss-loader
postcss-loader:為了瀏覽器的兼容性,有時(shí)候我們必須加上-webkitm, -ms, -moz等前綴。目的就是讓頁(yè)面可以在每個(gè)瀏覽器上正常運(yùn)行。postcss是一個(gè)CSS的處理平臺(tái)可以幫CSS實(shí)現(xiàn)更多的功能。
用法:
安裝postcss: npm install postcss-loader autoprefixer
配置文件
webpack.config.js:
module: { rules: [{ test: /\.css$/ loader: 'style-loader!css-loader!postcss-loader' }] }
postcss.config.js
module.exports = { plugins: [ require('autoprefixer')//在postcss-loader中引入autoprefixer插件 ] }
或者
const autoprefixer = require('autoprefixer'); module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins() { return [autoprefixer]; } } }] }] }
less-style
添加對(duì)webpack的LESS支持。當(dāng)遇到less文件時(shí),先交給less-loader處理,然后交給css-loader,最后交由style-loader處理,然后執(zhí)行webpack打包
module: { rules: [{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }] }
要啟用CSS的source map,你需要將sourceMap選項(xiàng)傳遞給less-loader和css-loader
CSS SourceMap信息文件,里面存儲(chǔ)著位置信息。隨著代碼增多,我們會(huì)對(duì)代碼進(jìn)行壓縮,代碼壓縮之后進(jìn)行調(diào)bug定位會(huì)非常困難,于是引入sourceMap記錄壓縮前后的位置信息,當(dāng)產(chǎn)生錯(cuò)誤時(shí)直接定位到未壓縮前的位置,方便調(diào)試。簡(jiǎn)單來(lái)說(shuō)就是記錄壓縮的翻譯文件,通過(guò)這個(gè)文件可以找到你的對(duì)應(yīng)源碼
module.exports = { ... module: { rules: [{ test: /\.less$/, use: ['style-loader', 'css-loader', { loader: 'less-loader', options: { sourceMap: true } }] }] } };
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序語(yǔ)音同步智能識(shí)別的實(shí)現(xiàn)案例代碼解析
在一些小程序的開(kāi)發(fā)場(chǎng)景中經(jīng)常會(huì)有語(yǔ)音轉(zhuǎn)文字的需求,今天小編通過(guò)實(shí)際案例給大家分享微信小程序語(yǔ)音同步智能識(shí)別功能,需要的朋友可以參考下2020-05-05JavaScript制作windows經(jīng)典掃雷小游戲
掃雷是一款相當(dāng)大眾的小游戲,游戲目標(biāo)是在最短的時(shí)間內(nèi)根據(jù)點(diǎn)擊格子出現(xiàn)的數(shù)字找出所有非雷格子,同時(shí)避免踩雷。今天我們來(lái)看看如何使用javascript來(lái)實(shí)現(xiàn)這款小游戲2015-03-03javascript復(fù)制粘貼與clipboardData的使用
window.clipboardData可以實(shí)現(xiàn)復(fù)制與粘貼的操作,下面有個(gè)小示例,想學(xué)習(xí)的朋友可以參考下2014-10-10javascript sort()對(duì)數(shù)組中的元素進(jìn)行排序詳解
在本篇文章里小編給大家整理是一篇關(guān)于javascript sort()對(duì)數(shù)組中的元素進(jìn)行排序的相關(guān)知識(shí)點(diǎn)內(nèi)容,需要的朋友們學(xué)習(xí)下。2019-10-10JS基于Mootools實(shí)現(xiàn)的個(gè)性菜單效果代碼
這篇文章主要介紹了JS基于Mootools實(shí)現(xiàn)的個(gè)性菜單效果代碼,涉及JavaScript頁(yè)面元素的遍歷及樣式的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JavaScript 嵌套函數(shù)指向this對(duì)象錯(cuò)誤的解決方法
JavaScript對(duì)于全局函數(shù)內(nèi)的this綁定為全局對(duì)象,而對(duì)于嵌套函數(shù)也采用了相同的解釋。2010-03-03js判斷是否為數(shù)組的函數(shù): isArray()
像 Ajaxian,StackOverflow 等,搜一下,到處都在討論 isArray() 的實(shí)現(xiàn)。對(duì)于一切都是對(duì)象的 JavaScript 來(lái)說(shuō),確實(shí)有點(diǎn)麻煩2011-10-10深入理解JavaScript字節(jié)二進(jìn)制知識(shí)以及相關(guān)API
當(dāng)前,前端對(duì)二進(jìn)制數(shù)據(jù)有許多的API可以使用,這豐富了前端對(duì)文件數(shù)據(jù)的處理能力,有了這些能力,就能夠?qū)D片等文件的數(shù)據(jù)進(jìn)行各種處理。本文將著重介紹一些前端二進(jìn)制數(shù)據(jù)處理相關(guān)的API知識(shí),希望對(duì)大家有所幫助2023-02-02