摘要:由于本篇我們只講的基本使用,故這里不再深入講解,有興趣的可以點擊這里學習。使用的方式有三種使用方式,如下配置推薦在文件中指定。下一篇會給大家介紹系列之及簡單的使用
歡迎大家訪問我的github blog查看更多文章
webpack系列之loader及簡單的使用 一. loader有什么用webpack本身只能打包Javascript文件,對于其他資源例如 css,圖片,或者其他的語法集比如jsx,是沒有辦法加載的。 這就需要對應(yīng)的loader將資源轉(zhuǎn)化,加載進來。
比如
你的工程中,樣式文件都使用了less語法,是不能被瀏覽器識別的,這時候我們就需要使用對應(yīng)的loader,來把less語法轉(zhuǎn)換成瀏覽器可以識別的css語法。
例如一個簡單的less文件:
轉(zhuǎn)換前:
.demo { width: 200px; height: 100px; margin: auto; border: 1px solid; p { font-weight:bold; padding-left: 30px; } }
轉(zhuǎn)換后:
.demo { width: 200px; height: 100px; margin: auto; border: 1px solid; } .demo p { font-weight: bold; padding-left: 30px; }
后面的案例也是拿這個less文件來做演示的。
二. loader是什么先來看一下官方對loader的一個解釋:
A loader is a node module exporting a function
翻譯過來:loader就是一個export出來的function。
既然是 node module,所以如果你自己要自定義一個loader,完全可以這么寫:
module.exports = function (source) { // todo }
解釋
其中source參數(shù)是這個loader 要處理的源文件的字符串
返回經(jīng)過"翻譯"后的webpack 能夠處理的有效模塊
如果你所寫的 loader 需要依賴其他模塊的話,那么同樣以 module 的寫法,將依賴放在文件的頂部引進來即可:
var fs = require("fs") module.exports = function (source) { // todo }
如果你希望將處理后的結(jié)果(不止一個)返回給下一個 loader,那么就需要調(diào)用 webpack 所提供的 API。
由于本篇我們只講loader的基本使用,故這里不再深入講解,有興趣的可以點擊這里學習。
三. 使用loader在看了前面的介紹后,接下來給大家介紹一下怎么使用loader。
使用loader的方式有三種使用方式,如下:
配置(推薦):在 webpack.config.js 文件中指定 loader。
內(nèi)聯(lián):在每個 import 語句中顯式指定 loader。
CLI:在 shell 命令中指定它們。
以上三種方式,我們在開發(fā)過程中推薦使用第一種方式:
比如你想使用webpack來打包樣式文件,則可以在webpack.config.js里添加如下代碼:
module: { rules: [ { test: /.css$/, // 正則匹配所有.css后綴的樣式文件 use: ["style-loader", "css-loader"] // 使用這兩個loader來加載樣式文件 } ] }
module.rules 允許你在 webpack 配置中指定多個 loader。 這是展示 loader 的一種簡明方式,并且有助于使代碼變得簡潔。
上述rules的作用:
webpack在打包過程中,凡是遇到后綴為css的文件,就會使用style-loader和css-loader去加載這個文件。
在對loader有了一個大概的認識后,來做一個小案例,需求如下:
將上一篇(webpack系列之基本概念和使用)的demo輸出文字居中并用黑框圈起來目錄結(jié)構(gòu)
代碼目錄結(jié)構(gòu)如下:
├── node_modules
├── app
│ ├── bundle.js
│ └── index.html
├── package-lock.json
├── package.json
├── src
│ ├── index.js
│ └── main.less
└── webpack.config.js
我們必須使用 loader 告訴 webpack 加載 less 文件,為此,需要首先安裝相對應(yīng)的 loader:
npm install --save-dev less npm install --save-dev less-loader npm install --save-dev css-loader npm install --save-dev style-loader
這些loader的作用如下:
安裝less-loader后可以在js中使用require的方式來加載less文件了;
安裝css-loader后可以在js中加載css文件;
安裝style-loader的目的是為了讓加載的css作為style標簽內(nèi)容插入到html中。
2. 配置loaderwebpack.config.js代碼如下:
module.exports = { devtool: "eval-source-map", entry: __dirname + "/src/index.js", //入口文件 output: { path: __dirname + "/app", //打包后的文件存放的地方 filename: "bundle.js" //打包后輸出文件的文件名 }, module: { rules: [ { test: /.less$/, use: ["style-loader","css-loader", "less-loader"] } ] } }3.新建樣式文件
main.less代碼如下:
.demo { width: 200px; height: 100px; margin: auto; border: 1px solid; p { font-weight:bold; padding-left: 30px; } }4. 修改入口文件
在入口文件index.js里引入我們的樣式文件
require ("./main.less"); var element = document.createElement("div"); element.className = "demo"; var p = document.createElement("p"); p.innerText = "webpack系列之loader的基本使用!"; element.appendChild(p); document.body.appendChild(element);5.打包
在項目根目錄(webpack-demo)下執(zhí)行打包命令:
? webpack-demo webpack
打包成功,會輸出如下:
Hash: 1bb51c6a348686a223db Version: webpack 3.10.0 Time: 1077ms Asset Size Chunks Chunk Names bundle.js 53.8 kB 0 [emitted] main [0] ./src/index.js 273 bytes {0} [built] [2] ./src/main.less 1.19 kB {0} [built] [2] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/main.less 304 bytes {0} [built]6. 查看結(jié)果
在瀏覽器里刷新index.html:
你會發(fā)現(xiàn)輸出的文字被一個黑框給圈了起來,并且加粗顯示,這就表明我們的樣式文件已經(jīng)生效了,而且從截圖當中也可以看見樣式文件也插入到了html中。
css-loader : 解析css文件中代碼
style-loader : 將css模塊作為樣式導(dǎo)出到DOM中
less-loader : 加載和轉(zhuǎn)義less文件
sass-loader : 加載和轉(zhuǎn)義sass/scss文件
腳本轉(zhuǎn)換編譯script-loader : 在全局上下文中執(zhí)行一次javascript文件,不需要解析
babel-loader : 加載ES6 代碼后使用Babel轉(zhuǎn)義為ES5后瀏覽器才能解析
Files文件url-loader : 多數(shù)用于加載圖片資源,超過文件大小顯示則返回data URL
raw-loader : 加載文件原始內(nèi)容(utf-8格式)
加載框架vue-loader : 加載和轉(zhuǎn)義vue組件
react-hot-loader : 動態(tài)刷新和轉(zhuǎn)義react組件中修改的部分
六. 總結(jié)本篇向大家介紹了loader有什么用,什么是loader,以及怎么使用loader這些基礎(chǔ)知識,如果有興趣想了解得更深入一些,可以看看怎么編寫一個loader。
下一篇會給大家介紹:webpack系列之Plugin及簡單的使用
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/94282.html
摘要:系列之及簡單的使用一有什么用是核心功能,通過插件可以實現(xiàn)所不能完成的復(fù)雜功能,使用豐富的自定義,可以控制編譯流程的每個環(huán)節(jié),實現(xiàn)對的自定義功能擴展。三使用在配置文件中,向?qū)傩詡魅雽嵗纯伞? webpack系列之plugin及簡單的使用 一.plugin有什么用 plugin是webpack核心功能,通過plugin(插件)webpack可以實現(xiàn)loader所不能完成的復(fù)雜功能,使用p...
摘要:在上面的列表中,是自解釋型的。我們將使用后者。調(diào)整文件的內(nèi)容到這一步,這個應(yīng)用就具備熱刷新的功能。下一步,更新文件中的到現(xiàn)在為止,如果你在控制臺運行壓縮文件將被創(chuàng)建并且放在路徑下面。 這是React和ECMAScript2015系列文章的最后一篇,我們將繼續(xù)探索React 和 Webpack的使用。 下面是所有系列文章章節(jié)的鏈接: React 、 ES6 - 介紹(第一部分) Rea...
摘要:在上面的列表中,是自解釋型的。我們將使用后者。調(diào)整文件的內(nèi)容到這一步,這個應(yīng)用就具備熱刷新的功能。下一步,更新文件中的到現(xiàn)在為止,如果你在控制臺運行壓縮文件將被創(chuàng)建并且放在路徑下面。 這是React和ECMAScript2015系列文章的最后一篇,我們將繼續(xù)探索React 和 Webpack的使用。 下面是所有系列文章章節(jié)的鏈接: React 、 ES6 - 介紹(第一部分) Rea...
摘要:插件開發(fā)前端掘金作者原文地址譯者插件是為應(yīng)用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內(nèi)優(yōu)雅的實現(xiàn)文件分片斷點續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins譯者:jeneser Vue.js插件是為應(yīng)用添加全局功能的一種強大而且簡單的方式。插....
閱讀 3219·2021-11-08 13:21
閱讀 1200·2021-08-12 13:28
閱讀 1410·2019-08-30 14:23
閱讀 1931·2019-08-30 11:09
閱讀 847·2019-08-29 13:22
閱讀 2692·2019-08-29 13:12
閱讀 2554·2019-08-26 17:04
閱讀 2260·2019-08-26 13:22