webpack5用url-loader(file-loader)处理图片和img-loader压缩图片
webpack-cli 4.0的版本和 webpack-dev-server 3.11.0的版本不兼容,只能用webpack@5.0
+ webpack-cli@3.3.12
+ webpack-dev-server@3.11.0
的环境。
url-loader
是在 file-loader
的基础上再次开发的。所以 url-loader
依赖 file-loader
。
应为loader的执行是从下到上,从右到左的。所以 url-loader
要配置在前面。 img-loader
要配置在 url-loader
的后面。
依赖的模块(package.json)
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.3.0",
"file-loader": "^6.1.1",
"html-webpack-plugin": "^4.5.0",
"imagemin": "^7.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.1",
"imagemin-svgo": "^8.0.0",
"img-loader": "^3.0.2",
"mini-css-extract-plugin": "^1.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.0.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
项目结构
webpack5-demo-img
| package.json
| webpack.config.js
|
+---public
| favicon.ico
| index.html
|
+---src
| | main.css
| | main.js
| |
| \---assets
|
\---test-build-serve
| app.js
| package.json
|
\---static
在js中使用图片
// main.js
import "./main.css";
// 在js中使用图片
import mayi from "./assets/mayi.jpeg";
let MAYI = new Image();
MAYI.src = mayi;
document.getElementById("js-img").appendChild(MAYI);
webpack配置文件
// webpack.config.js
const webpack = require("webpack");
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin"); // 生成.html文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 把样式提取为单独的css文件 的插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 清除构建目录的插件
module.exports = {
entry: "./src/main.js", // 打包入口文件
mode: "development", // 使用开发模式
devServer: {
// 本地服务器代理
contentBase: path.join(__dirname, "./test-build-serve/static"), //指定在哪个目录下找要加载的文件
compress: true,
port: 8080, // 配置端口
hot: true, // 配置热更新
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
ignoreOrder: false,
}),
new htmlWebpackPlugin({
favicon: "./public/favicon.ico",
filename: "index.html",
template: "./public/index.html",
}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"], // 处理css的loader
},
{
test: /\.(gif|png|jpe?g)$/i,
use: [
{
// 用 url-loader 处理图片
loader: "url-loader", // url-loader 依赖于 file-loader 要使用url-loader必须安装file-loader
options: {
name: "[name].[hash:16].[ext]", // 文件名.hash.文件扩展名 默认格式为[hash].[ext],没有文件名
limit: 1024 * 8, // 将小于8KB的图片转换成base64的格式
outputPath: "assets/imgs", // 为你的文件配置自定义 output 输出目录 ; 用来处理图片路径问题
publicPath: "assets/imgs", // 为你的文件配置自定义 public 发布目录 ; 用来处理图片路径问题
},
},
{
// 用 img-loader 压缩图片
loader: "img-loader",
options: {
plugins: [
require("imagemin-pngquant")({
//压缩 png 的插件
speed: 4, // 取值范围 1-11 值越大压缩率越小 ,值越小压缩生成的文件越小 默认为4
}),
require("imagemin-gifsicle")({
// 压缩 gif 插件
optimizationLevel: 1, // 取值范围 1、2、3 默认1 3极限压缩,压缩和图片效果不好,使用默认1就行
}),
require("imagemin-mozjpeg")({
// 压缩 jpg 插件
quality: 50, // 1-100 值越大压缩率越小 ,值越小压缩生成的文件越小
}),
],
},
},
],
},
],
},
output: {
path: path.join(__dirname, "./test-build-serve/static"),
filename: "app.[hash:16].js",
publicPath: "/", // 也可以用来处理路径问题,加在所有文件路径前的根路径
},
};
imagemin-mozjpeg
、imagemin-gifsicle
、imagemin-pngquant
依赖 imagemin
url-loader参考: https://www.webpackjs.com/loaders/url-loader/ https://www.npmjs.com/package/url-loader
file-loader参考: https://www.webpackjs.com/loaders/file-loader/ https://www.npmjs.com/package/file-loader
img-loader参考: https://www.npmjs.com/package/img-loader
imagemin-mozjpeg配置项参考: https://www.npmjs.com/package/imagemin-mozjpeg
imagemin-gifsicle配置项参考: https://www.npmjs.com/package/imagemin-gifsicle
imagemin-pngquant配置项参考: https://www.npmjs.com/package/imagemin-pngquant
webpack5用url-loader(file-loader)处理图片和img-loader压缩图片的更多相关文章
- file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...
- universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法
在listview/gridview中使用UIL来display每个item的图片,当图片数量较多需要滑动滚动时会出现卡顿,而且加载过的图片再次上翻后依然会重复加载(显示设置好的加载中图片) 最近在使 ...
- java中URL和File的相互转化
首先,想比较一下这两者的不同.URL用于网络,所以带有明显的protocol,而且对于中文及符号支持的很不好.File就是我们平常系统中的文件路径了,对于中文及符号都支持,但是已经没有protocol ...
- YAMLLoadWarning: calling yaml.load() without Loader=... is deprecated, as the default Loader is unsafe
test.py import os import sys sys.path.append(])+'/lib/lib3.7') import yaml with open("default.y ...
- this.getClass().getResource("") url path file 区别
首先注意 "/word/appointDismiss.docx" 前面一定要加 /,有一次我就是忘记加/ 查了半天错, 不能写成 "word/appointDismiss ...
- YAMLLoadWarning: calling yaml.load() without Loader=... is deprecated, as the default Loader is unsafe. Please read https://msg.pyyaml.org/load for full details. data = yaml.load(file_data)
YAMLLoadWarning: calling yaml.load() without Loader=... is deprecated, as the default Loader is unsa ...
- 11 loader - 配置处理scss文件的loader
1.装包 cnpm i sass-loader -D peerDependencies WARNING sass-loader@* requires a peer of node-sass@^4.0. ...
- 10 loader - 配置处理less文件的loader
第一步:装包 cnpm i less-loader -D 安装完提示警告 peerDependencies WARNING less-loader@* requires a peer of less@ ...
- Jquery获取输入框属性file,ajax传输后端,下载图片
Django web开发获取input属性file,可以用request.FILES.get(' ')直接获取到,然后正常拼接路径就可以下载, 但是今天我们来用异步获取file的值在传输后端下载. 1 ...
- file does not exist 阿里云OSS图片上传遇到的问题
./uploads\20171209/0497b8dd16e72c6fcf5bfd552f535a81.png file does not exist 原代码 function aliyun($sav ...
随机推荐
- Javascript中0.1+0.2===0.3?怎么解决这个问题?
一.问题分析 计算机存储以二进制的方式,而0.1 在二进制中是无限循环的一个数字,所以会出现裁剪,精度丢失会出现,0.100000000000000002 === 0.1,0.200000000000 ...
- appium 在linux安装和使用(持续更新)
appium V1.10 centos7.4 安装 安装步骤 1. 安装node 为了得到npm(node package manager,nodejs的安装包管理工具,可以通过npm来下载appiu ...
- TCP/IP协议(8): ICMP(Internet Control Message Protocol) 协议 ——诊断和控制 IP 协议层
TCP/IP协议(8): ICMP(Internet Control Message Protocol) 协议 --诊断和控制 IP 协议层 关于网际控制报文协议(Internet Control M ...
- JZOJ 4752.字符串合成
\(\text{Problem}\) \(\text{Solution}\) 最优解一定是一个回文子串的最优构造加上剩下的逐个填入 考虑用回文树建出所有的回文串,然后 \(dp\) 求回文子串最优的构 ...
- Ubuntu18.04安装教程
转载csdn: Ubuntu18.04安装教程_Sunshine的博客-CSDN博客_ubuntu安装教程
- Bus Stop
题目 题意: 大概就是在x轴上(一维),有n个房子的坐标,你要建立公交车站,使得每个房子离最近的车站不过10公里,求最少的车站. 思路: 很简单,之接贪心即可,每次判断当前房子的后20公里有没有房子, ...
- 图论之最短路径Dijkstra算法
/** 图论之最短路径Dijkstra算法 */ #include<string.h> #include<stdio.h> #include<vector> #in ...
- C# 通过反射获取类字段名和值并加入到字典中(包含递归获取)
//测试类 public class HKAddvisitor1{ public string code { set; get; } public string msg { set; ge ...
- Error in created hook: "TypeError: Cannot read properties of undefined (reading 'get')"
写Vue 的时候常遇到的错误之一就是XXXXXX未定义,然后来一个undefined这种问题一般都是创建钩子出错:无法读取未定义的 xxx 属性. 此错误一般多出现在 created() 中, Vue ...
- C语言多维数组的实现与操作
常量和所需的头文件 #include<stdio.h> #include<stdarg.h> #include<stdlib.h> #define MAX_ARRA ...