4.1执行步骤

1）创建相关文件，并引入demo中使用到的图片资源文件，如下图红框部分

2）下载相关依赖

url-loader@3.0.0、file-loader5.0.2、html-loader@0.5.5

url-loader的使用依赖于file-loader，所以也需要下载file-loader

①url-loader：处理css、字体库等文件

②html-loader：处理html文件中的img图片，负责引入img从而能够被url-loader进行处理

通过url-loader可以对css文件中使用到的图片进行打包，如backgroud-image属性使用到的背景图片。

通过html-loader、url-loader可以处理html图片，这里要注意：html-loader采用commonjs解析，而url-loader默认采用es6模块化，要想使用html-loader需要将url-loader采用的解析方式改成commonjs。

4.2 代码段

1）webpack.config.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/index.js",output: {filename: "built.js",path: resove(__dirname,"build")},module: {rules: [{test: /\.css$/,use: ["style-loader","css-loader"]},{test: /\.less$/,use: ["style-loader","css-loader","less-loader"]},{// 使用url-loader解决webpack无法处理css样式中的url地址// url-loader模块依赖file-loader模块// 处理图片资源test: /\.(jpg|jpeg|png|gif)$/loader: "url-loader",options: {limit: 8 * 1024,name: '[hash:10][ext]'// 关闭url-loader默认的es6模块化解析，改为commonjs解析esModule: false}},{// 使用html-loader处理html文件中的img图片（负责引入html中的img，从而能被url-// loader处理）// 注意：使用html-loader需要将url-loader中的配置项esModule改成false，将// url-loader改为commonjs解析，而不是默认的es6模块化解析，因为html-loader// 使用的是commonjs解析test: /\.html$/,loader: "html-loader"}]},plugins: [new HtmlWebpackPlugin({template: "./src/index.html"})]
}

2）index.less

#box1 {width: 100px;height: 100px;background-image: url('./vue.jpg');background-repeat: no-repeat;background-size: 100% 100%;background-color: pink;
}#box2 {width: 200px;height: 200px;background-image: url('./react.png');background-repeat: no-repeat;background-size: 100% 100%;background-color: skyblue;
}#box3 {width: 300px;height: 300px;background-image: url('./angular.jpg');background-repeat: no-repeat;background-size: 100% 100%;background-color: yellowgreen;
}

3）index.js

import './index.less';

4）index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3"></div><img src="./angular.jpg" alt="angular">
</body>
</html>

图片自己去替换

总结：

① url-loader模块依赖file-loader，要想使用url-loader处理css中的url图片需要先下载file-loader、url-loader模块，再对url-loader进行配置

② 通过配置url-loader中对的limit，可以设置对limit范围内大小的图片进行base64压缩处理（上文中设置的是8kb内的图片），大于的则会原样输出。进行了base64压缩处理的图片可以在built.js中找到对应的代码段。使用limit的优点：可以减少请求数量（减轻服务器压力）；缺点：进行base64压缩后的图片体积会变大。

③ 通过配置url-loader中的name为[hash:10][ext]，可以对经过url-loader处理的图片进行hash的截取前十位，[ext]代表图片的后缀原样输出。

④ 在使用html-loader处理html的img图片，负责引入img从而能被url-loader进行处理时，存在html-loader的解析方式为commonjs解析，而url-loader使用的是ES6模块化解析，此时可以通过在url-loader配置esModule: false 将url-loader默认的解析方式（es6模块化）关闭，此时url-loader的解析方式会变成commonjs

6.webpack4打包图片资源相关推荐

webpack打包图片资源问题
在实际应用中有以下几种图片的引用方式: HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div sty ...
pyinstaller打包python应用之方法（含打包图片资源）
pyinstaller是python的打包工具,结合我的工程,记录下我的使用过程及经验总结. 1.pyinstaller的简单使用 1.1 打包成一个文件先cd切换到工程目录下,再执行: pyins ...
webpack4打包优化
layout: post title: webpack4打包优化 categories: webpack tags: webpack4打包优化针对vue cli3.0+,webpack4.0+,no ...
webpack4打包实战
一.模块化打包工具的由来 ES Module存在环境兼容问题,通过模块化方式划分的模块较多,网络请求频繁,在前端应用开发中不仅仅需要JavaScript代码需要模块化,随着应用的日益复杂,html,c ...
webpack4打包传统H5多页面
1. webpack核心概念入口(entry) 输出(output) loader 插件(plugins) 官方文档: https://www.webpackjs.com/configuration ...
webpack4打包html,html-webpack-plugin详解
打包html使用插件:html-webpack-plugin 安装 npm i --save-dev html-webpack-plugin 配置文件 const path = require(&qu ...
webpack4打包工具
什么是webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(de ...
iOS静态库中打包图片资源
问题描述: 最近在做一个项目,需要做一个含有图片资源得静态库.a,但是苹果提供得静态库工程无法将图片资源导入,只能通过外加.bundle文件的方式,这样在调试阶段也需要使用bundle文件,而每次更新 ...
webpack配置-打包图片资源
项目目录: 对于webpack4 来说的话,只要安装url-loader, file-loader就可以的 npm i html-loader url-loader file-loader -D we ...

6.webpack4打包图片资源

4.1执行步骤

4.2 代码段

6.webpack4打包图片资源相关推荐

最新文章

热门文章