webpack-loader的使用詳解
引入css后執(zhí)行打包命令 "build": "npx webpack --config wk.config.js"發(fā)現(xiàn)報(bào)錯(cuò)：
webpack默認(rèn)只能處理js其他的像css,圖片都需要借助loader來(lái)處理
css-loader
loader可以用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換，可以把css看成一個(gè)模塊，模塊可以通過(guò)import來(lái)加載，但是在加載模塊時(shí)，webpack不知道如何對(duì)其進(jìn)行加載，需要特定的loader完成這個(gè)功能。npm i css-loader -D
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.css$/,
use: [{loader:"css-loader"}],
},
],
},
};module.rules中允許我們配置多個(gè)loader.。rules對(duì)應(yīng)的值是一個(gè)數(shù)組[rule],數(shù)組中存放多個(gè)rule,rule是一個(gè)對(duì)象，有多個(gè)屬性：
test:用于對(duì)資源進(jìn)行匹配，通常會(huì)設(shè)置成正則表達(dá)式
use:對(duì)應(yīng)的值是一個(gè)數(shù)組[useEntry] useEntry是一個(gè)數(shù)組也有一些屬性
- loader:必須要一個(gè)loader屬性，對(duì)應(yīng)的值是一個(gè)字符串。只有一個(gè)loader時(shí)可以簡(jiǎn)寫(xiě) 例如use:[“css-loader”]
- options:可選的屬性,只是一個(gè)字符串或?qū)ο?/li>
- query：目前已經(jīng)被options給替代
loader: use:[loader]的簡(jiǎn)寫(xiě)， 只有一個(gè)loader時(shí)也可以簡(jiǎn)寫(xiě) loader:“css-loader”
簡(jiǎn)寫(xiě)：
//原來(lái)寫(xiě)法
module: {
rules: [
{
test: /\.css$/,
use: [{loader:"css-loader"}],
},
],
// 簡(jiǎn)寫(xiě)1
module: {
rules: [
{
test: /\.css$/,
loader:"css-loader"
},
],
},
// 簡(jiǎn)寫(xiě)2
module: {
rules: [
{
test: /\.css$/,
use:["csss-loader"]
},
],
}, style-loader
css-loader只能解決不報(bào)錯(cuò)的問(wèn)題,但是css樣式并沒(méi)有生效。這是因?yàn)閏ss-loader只負(fù)責(zé)解析css，不會(huì)將解析后的css插入到頁(yè)面中，需要通過(guò)style-loader把樣式插入到頁(yè)面中。npm i style-loader -D
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
};
// use: ["style-loader", "css-loader"], 也可以寫(xiě)成 use: [{ loader: "css-loader" }, { loader: "css-loader" }],loader的執(zhí)行順序是從后往前執(zhí)行的
在index.html中引入打包后的文件，就可以在頁(yè)面中看到效果
sass-loader 解析sass
npm i sass-loader -D
編寫(xiě)sass并引入文件
配置sass-loader
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
};postcss-loader
PostCSS是一個(gè)用JavaScript插件轉(zhuǎn)換CSS的工具。它可以幫助開(kāi)發(fā)人員處理CSS，包括自動(dòng)添加瀏覽器前綴、CSS變量、嵌套規(guī)則、函數(shù)等npm i postcss-loader -D
以 autoprefixer （會(huì)添加一些瀏覽器的前綴）為例
.
由于postcss-loader有很多配置項(xiàng)，所以使用對(duì)象的形式：
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["autoprefixer"],
//也有這種寫(xiě)法plugins: [require("autoprefixer")],現(xiàn)在可以省略require()
},
},
},
],
},
],
},
};結(jié)果：
由于postcss配置項(xiàng)太多，postcss通常單獨(dú)抽離出一個(gè)文件postcss.config.js:
在webpack中就可以簡(jiǎn)寫(xiě)了：
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
],
},
};“autoprefixer"只能自動(dòng)添加瀏覽器前綴，postcss還有其他功能，因此實(shí)際開(kāi)發(fā)中并不會(huì)安裝"autoprefixer”,而是使用 postcss-preset-env它可以將一些現(xiàn)代的css特性轉(zhuǎn)換為瀏覽器所識(shí)別的特性。npm i postcss-preset-env -D
處理資源模塊
在webpack5之前 加載這些資源需要使用一些loader，例如raw-loader,url-loader等。
在webpack5之后，可以直接使用資源模塊類型(asset module type)來(lái)代替上面這些loader。
資源模塊的類型分為 asset/resource ,asset/inline,asset/source,asset。
asset/resource:發(fā)送一個(gè)單獨(dú)的文件并導(dǎo)出url(之前通過(guò)file-loader來(lái)),如果有兩個(gè)圖片，在打包后會(huì)生成兩個(gè)文件，這就意味著還要發(fā)送額外的請(qǐng)求。
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset/resource",
},
],
},
};這里要注意圖片也要當(dāng)作一個(gè)模塊來(lái)導(dǎo)入
執(zhí)行命令后可以看到打包后的結(jié)果：
asset/inline：將圖片進(jìn)行base64編碼，并把編碼后的源碼打包到j(luò)s文件中。會(huì)造成js文件非常大，下載和解析js文件需要的時(shí)間長(zhǎng)。
onst path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset/inline",
},
],
},
};打包后的js文件
這里還加了一個(gè)背景圖.bgi { background-image: url(../asset/1.png); } img和background-image的url都是base64格式的
asset/source：是將圖片的源碼打包到j(luò)s文件中和asset/inline一樣會(huì)造成js文件過(guò)大。
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.css$/,。
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset/source",
},
],
},
};
asset:可以根據(jù)需要生成一個(gè)單獨(dú)的文件，或打包到j(luò)s中。
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset",
},
],
},
};一般type會(huì)設(shè)置為asset，將較小的文件進(jìn)行base64編碼，較大的文件單獨(dú)打包。
根據(jù)文件大小打包
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 4 * 1024,
},
},
},
],
},
};
//webpack官網(wǎng):https://www.webpackjs.com/configuration/module/#ruleparserdataurlcondition
// 如果一個(gè)模塊源碼大小小于 maxSize，那么模塊會(huì)被作為一個(gè) Base64 編碼的字符串注入到包中， 否則模塊文件會(huì)被生成到輸出的目標(biāo)目錄中。
//dataUrlCondition 還可以寫(xiě)成函數(shù)的形式
對(duì)打包后的文件名，文件目錄進(jìn)行操作
可以在output中對(duì)打包后生成的文件進(jìn)行操作，比如修改文件名。但是在這里修改會(huì)影響所有的文件，不推薦在這里修改。
// 這里也是可以支持[hash][ext][query]的
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
assetModuleFilename: "aa.png",
},
module: {
rules: [ ],
},
};應(yīng)該針對(duì)對(duì)應(yīng)的文件修改：
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 4 * 1024,
},
},
generator: {
filename: "img/[hash][ext]",
},
},
],
},
};
// webpack官網(wǎng)：https://www.webpackjs.com/configuration/module/#rulegeneratorfilename
//這里其實(shí)還可以控制生成的hash值的長(zhǎng)度 img/[hash:8][ext]
到目前為止所有的代碼
//webpack
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 4 * 1024,
},
},
generator: {
filename: "img/[hash][ext]",
},
},
],
},
};//postcss.config.js
module.exports = {
plugins: ["postcss-preset-env"],
};到此這篇關(guān)于webpack-loader的使用的文章就介紹到這了,更多相關(guān)webpack-loader的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在寫(xiě)js的時(shí)候,很多時(shí)候都會(huì)遇到異步轉(zhuǎn)同步的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于JS中如何讓異步執(zhí)行的方法同步執(zhí)行的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
javascript 變速加數(shù)功能實(shí)現(xiàn)代碼
試想一下你要在你的網(wǎng)站提供如下這樣的功能：提供一個(gè)文本框用于收集用戶數(shù)據(jù)，這個(gè)文本框只能接受整型的數(shù)值，不提供給用戶手工輸入，只提供兩個(gè)按鈕。2009-10-10
Miller同學(xué)發(fā)現(xiàn)的IE6 bug：如以下代碼，點(diǎn)擊textarea時(shí)，引發(fā)window的blur，導(dǎo)致focus與blur配對(duì)混亂2011-07-07
給事件響應(yīng)函數(shù)傳參數(shù)的四種方式小結(jié)
這篇文章主要介紹了給事件響應(yīng)函數(shù)傳參數(shù)的四種方式。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了淺談JS中this在各個(gè)場(chǎng)景下的指向，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JavaScript模擬文件拖選框樣式v1.0的實(shí)例
下面小編就為大家?guī)?lái)一篇JavaScript模擬文件拖選框樣式v1.0的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
IE與現(xiàn)代瀏覽器在DOM中最大的差異是什么無(wú)疑就是event了。各個(gè)瀏覽器接口的差異以及夠頭疼了，而IE甚至Firefox早期版本由于內(nèi)存管理機(jī)制不完善，很容易在事件處理中導(dǎo)致內(nèi)存泄漏2011-10-10
JS操作input標(biāo)簽屬性checkbox全選的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS操作input標(biāo)簽屬性checkbox全選的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了JavaScript中消除閉包的一般方法介紹,本文直接給出了操作示例,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了Servlet返回的數(shù)據(jù)js解析2種方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12