webpack3之loader全解析
首先亮出webpack官方網(wǎng)站,webpack能干什么?官網(wǎng)給出的答案就是,一句話,讓一切變得簡單!
各式各樣的loader層出不窮,讓我們在構建時不知所措,于此,總結下loader的全解析。
概念
loader,顧名思義,加載器,英文的解釋如下:
Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “l(fā)oad” them. Thus, loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!
中文翻譯過來就是:
loader 用于對模塊的源代碼進行轉換。loader 可以使你在 import 或“加載”模塊時預處理文件。因此,loader 類似于其他構建工具中“任務(task)”,并提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言(如 TypeScript)轉換為 JavaScript,或將內聯(lián)圖像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件!
從中,可以看出loader的強大作用,分析下:
- 轉換的作用。開發(fā)所用到的都轉換成網(wǎng)頁加載所必備的html+css+js+img等要求格式的文件。
- 轉換對象是源代碼。loader只對源代碼轉換,至于其他的功能,plugins就來接收它做不到的地方。
總結一句話:loader, 加載的機器,形象的比喻下,就像一個豆?jié){機,放上你的原料,它就開始認真的工作了!
常用的loader
1、babel-loader
This package allows transpiling JavaScript files using Babel and webpack.
加載 ES2015+ 代碼,然后使用 Babel 轉譯為 ES5
安裝:
npm install --save-dev babel-loader babel-core babel-preset-env webpack
使用:
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
2、style-loader
Adds CSS to the DOM by injecting a <style> tag
將模塊的導出作為樣式添加到 DOM 中
安裝:
npm install style-loader --save-dev
建議要與css-loader一起使用
使用:
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
3、css-loader
解析 CSS 文件后,使用 import 加載,并且返回 CSS 代碼
安裝:
npm install css-loader --save-dev
使用:
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
4、less-loader
加載和轉譯 LESS 文件
安裝:
npm install --save-dev less-loader less
使用:
{ test: /\.less$/, exclude: /node_modules/, use: ExtractTextPlugin.extract(['css-loader', 'less-loader']) }
5、url-loader
Loads files as base64 encoded URL
處理圖片類文件,但如果文件小于限制,可以返回 data URL
安裝:
npm install --save-dev url-loader
使用:
{ test: /\.(jpg|jpeg|png|gif)$/, loader: 'url-loader', options: { limit: 8192 } }
6、file-loader
Instructs webpack to emit the required object as file and to return its public URL
處理font/svg等,將文件發(fā)送到輸出文件夾,并返回(相對)URL
安裝:
npm install file-loader --save-dev
使用:
{ test: /\.(woff|woff2|svg|eot|ttf)$/, use: 'file-loader' }
7、vue-loader
加載和轉譯 Vue 組件
安裝:
npm install --save-dev vue-loader vue vue-template-compiler
使用:
{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: { less: ExtractTextPlugin.extract({ use: ['css-loader', 'less-loader'], fallback: 'vue-style-loader' }) } } }
至此,有關loader中所用的參數(shù)請移步官網(wǎng)查詢解決,謝謝查閱!以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
微信小程序wx.uploadfile 本地文件轉base64的實現(xiàn)代碼
這篇文章主要介紹了微信小程序wx.uploadfile 本地文件轉base64的實現(xiàn)方法,文中通過代碼講解給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06js對列表中第一個值處理與jsp頁面對列表中第一個值處理的區(qū)別詳解
本文是對js對列表中第一個值處理與jsp頁面對列表中第一個值處理的區(qū)別進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11JavaScript使用FileSystemObject對象寫入文本文件內容的方法
這篇文章主要介紹了JavaScript使用FileSystemObject對象寫入文本文件內容的方法,實例分析了javascript使用ActiveXObject的技巧與常見問題的解決方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08javascript的hashCode函數(shù)實現(xiàn)代碼小結
網(wǎng)上找了好一輪,找到個比較像樣而且足夠短的 hashCode 實現(xiàn),是從 Java 的 hashCode 中借鑒而得的。原理見 Java hashCode() ,也可以跟這里的 Java String 的源碼 參照對比一下2020-08-08淺析JavaScript中的平穩(wěn)退化(graceful degradation)
所謂平穩(wěn)退化,就是指可以讓訪問者在瀏覽器不支持javascript或者禁用了JavaScript的時候依舊可以順利的瀏覽你的網(wǎng)頁,下文給大家簡單介紹了js中的平穩(wěn)退化,感興趣的朋友一起看看吧2017-07-07