詳解webpack進(jìn)階之loader篇
webpack的loaders是一大特色，也是很重要的一部分。這遍博客我將分類講解一些常用的laoder
一、loaders之 預(yù)處理
- css-loader 處理css中路徑引用等問題
- style-loader 動態(tài)把樣式寫入css
- sass-loader scss編譯器
- less-loader less編譯器
- postcss-loader scss再處理
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader
栗子:
module: {
loaders: [
{test: /\.css$/, loader: "style!css?sourceMap!postcss"},
{test: /\.less$/, loader: "style!css!less|postcss"},
{test: /\.scss$/, loader: "style!css!sass|postcss"}
]
}
二、loaders之 js處理
- babel-loader
- jsx-loader
npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader
栗子
新建一個名字為.babelrc的文件
{
"presets": ["es2015","react"],
"plugins":["antd"]
}
新建一個名字為webpack.config.js文件
module.exports ={
entry: './entry.js',
output: { path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.js$/, loader: "babel", exclude: /node_modules/},
{test: /\.jsx$/, loader: "jsx-loader"}
{test: /.css$/, loader: 'style!css'} ]
}
};
三、loaders之 圖片處理
url-loader
npm install --save-dev url-loadr
module: {
loaders: [
{test: /\.(jpg|png)$/, loader: "url?limit=8192"},
]
}
四、loaders之 文件處理
file-loader
npm install --save-dev file-loader
module: {
loaders: [
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file'
},
]
}
五、loaders之 json處理
json-loader
npm install --save-dev json-loader
module: {
loaders: [
{test: /\.json$/,loader: 'json'},
]
}
六、loaders之 html處理
raw-loader
npm install --save-dev raw-loader
module: {
loaders: [
{ test: /\.html$/,loader: 'raw'},
]
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)網(wǎng)頁加載進(jìn)度條代碼超簡單
網(wǎng)頁進(jìn)度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁的加載進(jìn)度情況，loading進(jìn)度條可用動畫的形式從開始0%到100%完成網(wǎng)頁加載這一過程。代碼簡單易懂，效果非常好，需要的一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09
用javascript實(shí)現(xiàn)截取字符串包含中文處理的函數(shù)
一直不知道js可以截取中文字符，呵呵，原理用正則表達(dá)式，匹配中文的長度，中文算兩個，因為算一個，是個好東西，推薦大家收藏2008-04-04
淺析Virtual DOM的概念與其在現(xiàn)代前端框架中的實(shí)踐
這篇文章將深入探討Virtual DOM（虛擬DOM）的概念,分析其對前端開發(fā)的革新影響,并以此展示前端技術(shù)的深度和魅力,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
bootstrap模態(tài)框彈出和隱藏,動態(tài)改變中間內(nèi)容的實(shí)例
今天小編就為大家分享一篇bootstrap模態(tài)框彈出和隱藏,動態(tài)改變中間內(nèi)容的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript.The.Good.Parts閱讀筆記（一）假值與===運(yùn)算符
JavaScript 假值與===運(yùn)算符，學(xué)習(xí)js的朋友可以看下。2010-11-11
本文主要介紹了5分鐘快速搭建vue3+ts+vite+pinia項目，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
js常用排序，整理了，常用的數(shù)組互換。2010-12-12
這篇文章主要給大家介紹了關(guān)于如何利用Typescript封裝本地存儲的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01
js點(diǎn)擊事件的執(zhí)行過程實(shí)例分析【冒泡與捕獲】
這篇文章主要介紹了js點(diǎn)擊事件的執(zhí)行過程,結(jié)合實(shí)例形式分析了js事件機(jī)制中的冒泡與捕獲相關(guān)原理、操作技巧與注意事項,需要的朋友可以參考下2020-04-04
本文向我們簡單介紹了javascript中自定義模板的2種方法，圖文并茂，十分詳細(xì)，這里推薦給小伙伴們。2015-01-01