概念
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,或將內(nèi)聯(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
使用:
2、style-loader
Adds CSS to the DOM by injecting a <style> tag
將模塊的導出作為樣式添加到 DOM 中
安裝:
npm install style-loader --save-dev
建議要與css-loader一起使用
使用:
3、css-loader
解析 CSS 文件后,使用 import 加載,并且返回 CSS 代碼
安裝:
npm install css-loader --save-dev
使用:
4、less-loader
加載和轉譯 LESS 文件
安裝:
npm install --save-dev less-loader less
使用:
5、url-loader
Loads files as base64 encoded URL
處理圖片類文件,但如果文件小于限制,可以返回 data URL
安裝:
npm install --save-dev url-loader
使用:
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
使用:
7、vue-loader
加載和轉譯 Vue 組件
安裝:
npm install --save-dev vue-loader vue vue-template-compiler
使用:
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com