# 安装npm i -D url-loader html-loader file-loader# loader配置module: { rules: [ // 图片处理 { test: /\.(png|jpeg|jpg|gif)$/, use: [ { loader: ‘url-loader‘, options: { // 图片小于8kb，就会被base64处理 // 优点: 减少请求数量(减轻服务器压力) // 缺点：图片体积会更大(文件请求速度更慢) limit: 8 * 1024, name:...
本次课程的代码目录(如下图所示)：>>> 本节课源码 >>> 所有课程源码 本节课会讲述 webpack4 中的图片常用的基础操作： 图片处理 和 Base64编码图片压缩合成雪碧图1. 准备工作 如项目代码目录展示的那样，除了常见的 app.js 作为入口文件，我们将用到的 3 张图片放在 /src/assets/img/ 目录下，并在样式文件 base.css 中引用这些图片。 剩下的内容交给 webpack 打包处理即可。样式文件和入口 js 文件的代码分别如下所示： /* base...
图片的处理 相关操作main.js //这个是CommonJS的模块化 浏览器不认识 //需要使用webpack打包 const {add,mul}=require('./js/mathUtils.js'); console.log(add(1, 2)); console.log(mul(3, 2)); //3 依赖css文件 需要安装对应的loader require('./css/normal.css'); normal.css body{background-color: rebeccapurple;background: url("../img/hlw.jpg"); }webpack.config.js const path=require('path');module.exports= {entry:...