詳解webpack進階之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)文章
本文以一個簡單的小例子，簡述在微信小程序開發(fā)中左右分欄功能的實現(xiàn)方式，主要涉及scroll-view ，列表數(shù)據(jù)綁定，及簡單樣式等內(nèi)容，感興趣的朋友跟隨小編一起看看吧2019-05-05
TypeScript 引用資源文件后提示找不到的異常處理技巧
這篇文章主要介紹了TypeScript 引用資源文件后提示找不到的異常處理,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要是對Eclipse去除js(JavaScript)驗證錯誤進行了介紹。在Eclipse中，js文件常常會報錯。可以通過如下幾個步驟解決2014-02-02
js設(shè)置cookie過期及清除瀏覽器對應(yīng)名稱的cookie
js設(shè)置cookie過期也就相當(dāng)于清除瀏覽器對應(yīng)名稱的cookie，下面有個不錯的示例，感興趣的朋友可以參考下2013-10-10
使用typescript改造koa開發(fā)框架的實現(xiàn)
這篇文章主要介紹了使用typescript改造koa開發(fā)框架的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
javascript移動設(shè)備Web開發(fā)中對touch事件的封裝實例
這篇文章主要介紹了javascript移動設(shè)備Web開發(fā)中對touch事件的封裝實例,分別對tap事件、doubleTap事件、longTap事件、swipe事件做了封裝,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了純js實現(xiàn)無限空間大小的本地存儲的功能，源碼和demo都放給大家，本文著重說下實現(xiàn)的原理，具體的實踐擴展小伙伴們自由發(fā)揮吧。2015-06-06
javascript和php使用ajax通信傳遞JSON的實例
今天小編就為大家分享一篇javascript和php使用ajax通信傳遞JSON的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了js實現(xiàn)文本框選中的方法,涉及javascript中select()方法的使用技巧,需要的朋友可以參考下2015-05-05