大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
图片处理url-loader(webpack5之前的处理方式)
在项目开发中,我们时长会需要使用到图片,比如在img
文件夹中有图片test1.png
,然后在normal.css
中会引用到图片
body{
background: url("../img/test1.png");
}
但是此时,我们直接使用webpack
打包是会报错的,我们需要安装url-loader
,它是用于将文件转换为 base64
URI 的 loader
。
安装命令如下:
npm install url-loader --save-dev
url-loader
功能类似于 file-loader
, 但是在文件大小(单位为字节)低于指定的限制时,可以返回一个 DataURL
。
接着我们在webpack.config.js
中配置url-loader
的设置
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif|jpeg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
};
此时,如果我们的图片test1.png
的大小小于8192k,那么就可以打包成功,但是如果我们的图片大于8192k,此时就需要安装file-loader
安装命令如下:
npm install file-loader --save-dev
然后,在 webpack.config.js
配置中添加 loader
。例如:
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
publicPath: "dist/"
}
},
],
},
],
},
};
注意:配置时如果你同时配置了url-loader
,一定要把url-loader
的配置注释掉
此时如果我们进行打包,打包出来的图片名字是随机的哈希值字符串,例如1b959a13f661bd214696460400b8c8d0.png
,如果我们想自定义名字,则需要进行配置option
选项,具体参数可以参考官网
资源模块
webpack5
之前我们处理静态资源比如。图片字体之类的资源的时候等,需要用到url-loader
,file-loader
,raw-loader
,webpack5
则放弃了这三个loader
,这三个loader
在github
上也停止了更新。
webpack5
使用四种新增的资源模块(Asset Modules)
替代了这些loader
的功能。
asset/resource
将资源分割为单独的文件,并导出url,就是之前的file-loader
的功能.asset/inline
将资源导出为dataURL
(url(data:))的形式,之前的url-loader
的功能.asset/source
将资源导出为源码(source code)
. 之前的raw-loader
功能.asset
自动选择导出为单独文件或者dataURL
形式(默认为8KB). 之前有url-loader
设置asset size limit
限制实现。
案例
我们这里以assert/inline
为例子,进行配置
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.png/,
type: 'asset/inline'
},
],
},
}
此时,再进行打包,png
格式的图片都会被作为 data URI
注入到 bundle
中。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165385.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...