webpack-loader的使用詳解
引入css后執(zhí)行打包命令 "build": "npx webpack --config wk.config.js"發(fā)現(xiàn)報錯：
webpack默認只能處理js其他的像css,圖片都需要借助loader來處理
css-loader
loader可以用于對模塊的源代碼進行轉(zhuǎn)換，可以把css看成一個模塊，模塊可以通過import來加載，但是在加載模塊時，webpack不知道如何對其進行加載，需要特定的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對應的值是一個數(shù)組[rule],數(shù)組中存放多個rule,rule是一個對象，有多個屬性：
test:用于對資源進行匹配，通常會設(shè)置成正則表達式
use:對應的值是一個數(shù)組[useEntry] useEntry是一個數(shù)組也有一些屬性
- loader:必須要一個loader屬性，對應的值是一個字符串。只有一個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只負責解析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ā)送一個單獨的文件并導出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",
},
],
},
};這里要注意圖片也要當作一個模塊來導入
執(zhí)行命令后可以看到打包后的結(jié)果：
asset/inline：將圖片進行base64編碼，并把編碼后的源碼打包到js文件中。會造成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：是將圖片的源碼打包到js文件中和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ù)需要生成一個單獨的文件，或打包到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",
},
],
},
};一般type會設(shè)置為asset，將較小的文件進行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 編碼的字符串注入到包中， 否則模塊文件會被生成到輸出的目標目錄中。
//dataUrlCondition 還可以寫成函數(shù)的形式
對打包后的文件名，文件目錄進行操作
可以在output中對打包后生成的文件進行操作，比如修改文件名。但是在這里修改會影響所有的文件，不推薦在這里修改。
// 這里也是可以支持[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: [ ],
},
};應該針對對應的文件修改：
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+html5實現(xiàn)復制文字按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
掃微信小程序碼實現(xiàn)網(wǎng)站登陸實現(xiàn)解析
這篇文章主要介紹了掃微信小程序碼實現(xiàn)網(wǎng)站登陸實現(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
在引用與本頁面編碼格式不一樣的js文檔時，如果被引用的js代碼有ASCII字符之外的字符，那么就會出現(xiàn)代碼錯誤。2009-03-03
這篇文章主要給大家介紹了關(guān)于如何全局重寫小程序Page函數(shù)wx對象的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用小程序具有一定的參考學習價值,需要的朋友可以參考下2022-08-08
IE6中使用position導致頁面變形的解決方案(js代碼)
IE6中使用position導致頁面變形，影響用戶體驗，通過搜索可以通過js來實現(xiàn)。2011-01-01
基于JavaScript實現(xiàn)猜數(shù)字游戲代碼實例
這篇文章主要介紹了基于JavaScript實現(xiàn)猜數(shù)字游戲代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了前端頁面禁止別人調(diào)試的方法的相關(guān)資料,需要的朋友可以參考下2023-03-03
基于jquery的高性能td和input切換并可修改內(nèi)容實現(xiàn)代碼
在實際工作中，我們會碰到這樣一個情況。在頁面中顯示著100個數(shù)據(jù)，同時用戶還希望他可以更改其中的數(shù)據(jù)，普通的方式可能如下2011-01-01
這篇文章主要介紹了JS實現(xiàn)的驗證身份證及獲取地區(qū)功能,結(jié)合實例形式分析了JS字符串、數(shù)組及正則操作相關(guān)技巧,需要的朋友可以參考下2017-01-01
這篇文章主要為大家總結(jié)了Bootstrap Table使用心得,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11