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