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 的后面。

项目demo : https://github.com/cisbest/webpack5-demo-img

依赖的模块(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-mozjpegimagemin-gifsicleimagemin-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压缩图片的更多相关文章

  1. file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度

    /** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...

  2. universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法

    在listview/gridview中使用UIL来display每个item的图片,当图片数量较多需要滑动滚动时会出现卡顿,而且加载过的图片再次上翻后依然会重复加载(显示设置好的加载中图片) 最近在使 ...

  3. java中URL和File的相互转化

    首先,想比较一下这两者的不同.URL用于网络,所以带有明显的protocol,而且对于中文及符号支持的很不好.File就是我们平常系统中的文件路径了,对于中文及符号都支持,但是已经没有protocol ...

  4. 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 ...

  5. this.getClass().getResource("") url path file 区别

    首先注意 "/word/appointDismiss.docx" 前面一定要加 /,有一次我就是忘记加/ 查了半天错, 不能写成 "word/appointDismiss ...

  6. 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 ...

  7. 11 loader - 配置处理scss文件的loader

    1.装包 cnpm i sass-loader -D peerDependencies WARNING sass-loader@* requires a peer of node-sass@^4.0. ...

  8. 10 loader - 配置处理less文件的loader

    第一步:装包 cnpm i less-loader -D 安装完提示警告 peerDependencies WARNING less-loader@* requires a peer of less@ ...

  9. Jquery获取输入框属性file,ajax传输后端,下载图片

    Django web开发获取input属性file,可以用request.FILES.get(' ')直接获取到,然后正常拼接路径就可以下载, 但是今天我们来用异步获取file的值在传输后端下载. 1 ...

  10. file does not exist 阿里云OSS图片上传遇到的问题

    ./uploads\20171209/0497b8dd16e72c6fcf5bfd552f535a81.png file does not exist 原代码 function aliyun($sav ...

随机推荐

  1. Javascript中0.1+0.2===0.3?怎么解决这个问题?

    一.问题分析 计算机存储以二进制的方式,而0.1 在二进制中是无限循环的一个数字,所以会出现裁剪,精度丢失会出现,0.100000000000000002 === 0.1,0.200000000000 ...

  2. appium 在linux安装和使用(持续更新)

    appium V1.10 centos7.4 安装 安装步骤 1. 安装node 为了得到npm(node package manager,nodejs的安装包管理工具,可以通过npm来下载appiu ...

  3. TCP/IP协议(8): ICMP(Internet Control Message Protocol) 协议 ——诊断和控制 IP 协议层

    TCP/IP协议(8): ICMP(Internet Control Message Protocol) 协议 --诊断和控制 IP 协议层 关于网际控制报文协议(Internet Control M ...

  4. JZOJ 4752.字符串合成

    \(\text{Problem}\) \(\text{Solution}\) 最优解一定是一个回文子串的最优构造加上剩下的逐个填入 考虑用回文树建出所有的回文串,然后 \(dp\) 求回文子串最优的构 ...

  5. Ubuntu18.04安装教程

    转载csdn: Ubuntu18.04安装教程_Sunshine的博客-CSDN博客_ubuntu安装教程

  6. Bus Stop

    题目 题意: 大概就是在x轴上(一维),有n个房子的坐标,你要建立公交车站,使得每个房子离最近的车站不过10公里,求最少的车站. 思路: 很简单,之接贪心即可,每次判断当前房子的后20公里有没有房子, ...

  7. 图论之最短路径Dijkstra算法

    /** 图论之最短路径Dijkstra算法 */ #include<string.h> #include<stdio.h> #include<vector> #in ...

  8. C# 通过反射获取类字段名和值并加入到字典中(包含递归获取)

    //测试类 public class HKAddvisitor1{    public string code { set; get; }    public string msg { set; ge ...

  9. Error in created hook: "TypeError: Cannot read properties of undefined (reading 'get')"

    写Vue 的时候常遇到的错误之一就是XXXXXX未定义,然后来一个undefined这种问题一般都是创建钩子出错:无法读取未定义的 xxx 属性. 此错误一般多出现在 created() 中, Vue ...

  10. C语言多维数组的实现与操作

    常量和所需的头文件 #include<stdio.h> #include<stdarg.h> #include<stdlib.h> #define MAX_ARRA ...