webpack5处理图片、图标字体、多媒体等静态资源文件
作者：暴躁程序员
在 webpack5 中内置了 file-loader、url-loader、raw-loader, 可以直接通过配置实现常用功能,下面就来介绍一下webpack5处理图片、图标字体、多媒体等静态资源文件的实现方法,感兴趣的可以了解一下
在 webpack5 中内置了 file-loader、url-loader、raw-loader, 可以直接通过配置实现常用功能。官网
一、搭建 webpack 基础环境
初始化环境
npm init -y
安装环境依赖
npm install webpack cross-env webpack-cli -D
在 package.json 中修改 scripts
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --config ./webpack.config.js --watch --progress --color ",
"build": "cross-env NODE_ENV=production webpack --config ./webpack.config.js --progress --color "
},
新建入口文件 src/index.js
consle.log("hello world");
创建 webpack.config.js 配置文件
var path = require("path");
module.exports = {
entry: {
app: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-budle.js",
clean: true,
},
mode: process.env.NODE_ENV,
module: {
rules: [],
},
};打包测试
npm run dev npm run build
二、webpack5 处理图片资源
安装依赖
npm install style-loader css-loader -D
修改 webpack.config.js 配置文件
var path = require("path");
module.exports = {
entry: {
app: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-budle.js",
clean: true,
},
mode: process.env.NODE_ENV,
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
],
},
],
},
};新建 src/assets/css/index.css
#app div:nth-child(1) {
width: 50px;
height: 50px;
background: url("../images/01.png") no-repeat;
background-size: 100% 100%;
}
#app div:nth-child(2) {
width: 50px;
height: 50px;
background: url("../images/02.png") no-repeat;
background-size: 100% 100%;
}
#app div:nth-child(3) {
width: 50px;
height: 50px;
background: url("../images/03.png") no-repeat;
background-size: 100% 100%;
}
新建入口文件 src/index.js
import "./assets/css/index.css";
新建 src/index.html 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="../dist/app-budle.js"></script>
</head>
<body>
<div id="app">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
打包编译
npm run build
在浏览器打开 src/index.html，查看结果
发现图片可以正常渲染，在 dist 中可查看到打包后的图片
配置打包输出路径，并配置静态资源转 base64 的 maxSize，修改 webpack.config.js 配置文件
设置 type: "asset" ，当指定静态资源打包路径时，parser.dataUrlCondition.maxSize: 8 * 1024 会转 base64 自动生效，需手动配置范围
var path = require("path");
module.exports = {
entry: {
app: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-budle.js",
clean: true,
},
mode: process.env.NODE_ENV,
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
esModule: false,
},
},
{
loader: "css-loader",
},
],
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 1 * 1024, // 小于1kb转base64，减少请求次数
},
},
generator: {
filename: "static/images/[hash:10][ext][query]", // 指定打包路径和文件名
},
},
],
},
};三、webpack5 处理图标字体资源
修改 webpack.config.js
设置 asset/resource ，静态资源文件打包时不会转 base64
var path = require("path");
module.exports = {
entry: {
app: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-budle.js",
clean: true,
},
mode: process.env.NODE_ENV,
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
esModule: false,
},
},
{
loader: "css-loader",
},
],
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 1 * 1024, // 小于1kb转base64，减少请求次数
},
},
generator: {
filename: "static/images/[hash:10][ext][query]", // 指定打包路径和文件名
},
},
{
test: /\.(ttf|woff|woff2?)$/i,
type: "asset/resource",
generator: {
filename: "static/iconfont/[hash:10][ext][query]",
},
},
],
},
};四、webpack5 处理视频资源
修改 webpack.config.js
设置asset/resource ，静态资源文件打包时不会转 base64
var path = require("path");
module.exports = {
entry: {
app: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name]-budle.js",
clean: true,
},
mode: process.env.NODE_ENV,
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader",
options: {
esModule: false,
},
},
{
loader: "css-loader",
},
],
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 1 * 1024, // 小于1kb转base64，减少请求次数
},
},
generator: {
filename: "static/images/[hash:10][ext][query]",
},
},
{
test: /\.(ttf|woff|woff2?)$/i,
type: "asset/resource",
generator: {
filename: "static/iconfont/[hash:10][ext][query]",
},
},
{
test: /\.(map3|map4|avi)$/i,
type: "asset/resource",
generator: {
filename: "static/media/[hash:10][ext][query]",
},
},
],
},
};到此这篇关于webpack5处理图片、图标字体、多媒体等静态资源文件的文章就介绍到这了,更多相关webpack5处理静态资源文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！