| 【快速搞定Webpack5】处理图片资源（四） | 您所在的位置：网站首页 › url和src的图片路径 › 【快速搞定Webpack5】处理图片资源（四） |
【快速搞定Webpack5】处理图片资源（四）
|
过去在webpack4中，我们处理图片资源通过file-loader和url-loader进行处理 现在webpack5已经将两个loader功能内置到webpack中了，我们只需要简单配置即可处理图片资源。 新增37-38行配置 const path = require("path"); module.exports = { // 入口 entry: "./src/main.js", // 需要用相对路径 // 输出 output: { // 文件的输出路径 // __dirname nodejs的变量，代表当前文件的文件夹目录 path: path.resolve(__dirname, "dist"), // 需要用绝对路径 需要用的Nodejs的核心模块 path，专门处理路径问题 // 文件名 filename: "main.js", }, // 加载器 module: { rules: [ // loader的配置 { test: /\.css$/, // 只检测.css文件 use:[ // 执行顺序，从右到左，从下到上 "style-loader", // 将js中的css通过创建style标签添加到html文件中生效 "css-loader", // 将css资源编译成commonJs的模块到js中 ], }, { test: /\.less$/, // 只检测.less文件 // loader: "xxx", // 配置中只能使用一个loader，use可以多个 use:[ // 执行顺序，从右到左，从下到上 "style-loader", // 将js中的css通过创建style标签添加到html文件中生效 "css-loader", // 将css资源编译成commonJs的模块到js中 "less-loader", // 将less资源编译成css ], }, { test: /\.(png|jpe?g|gif|webp)$/, type: "asset", // 这里使用asset相当于就是webpack4中使用了url-loader来处理 }, ], }, // 插件 plugins: [ // plugin的配置 ], // 模式 mode: "development", }; 2、添加图片资源 src/images/1.jpgsrc/images/2.jpeg 3、使用图片资源 src/css/index.css .box1 { width: 100px; height: 100px; background-color: pink; margin: 10px; background-image: url("../images/WechatIMG344.jpeg"); background-size: cover; } src/less/index.less .box2 { width: 150px; height: 150px; background-color:tomato; margin: 5px; border-radius: 5px; float: left; background-image: url("../images/index.jpg"); background-size: cover; } 5、输出资源 npx webpack
官方文档 进入后搜索：parser 配置文件（新增39-44行配置） const path = require("path"); module.exports = { // 入口 entry: "./src/main.js", // 需要用相对路径 // 输出 output: { // 文件的输出路径 // __dirname nodejs的变量，代表当前文件的文件夹目录 path: path.resolve(__dirname, "dist"), // 需要用绝对路径 需要用的Nodejs的核心模块 path，专门处理路径问题 // 文件名 filename: "main.js", }, // 加载器 module: { rules: [ // loader的配置 { test: /\.css$/, // 只检测.css文件 use:[ // 执行顺序，从右到左，从下到上 "style-loader", // 将js中的css通过创建style标签添加到html文件中生效 "css-loader", // 将css资源编译成commonJs的模块到js中 ] }, { test: /\.less$/, // 只检测.less文件 // loader: "xxx", // 配置中只能使用一个loader，use可以多个 use:[ // 执行顺序，从右到左，从下到上 "style-loader", // 将js中的css通过创建style标签添加到html文件中生效 "css-loader", // 将css资源编译成commonJs的模块到js中 "less-loader", // 将less资源编译成css ] }, { test: /\.(png|jpe?g|gif|webp)$/, type: "asset", // 这里使用asset相当于就是webpack4中使用了url-loader来处理 parser: { dataUrlCondition: { // 设置小于15k 使用base64 // 优点减少请求数量 缺点：文件体积变大 maxSize: 15 * 1024, } } }, ], }, // 插件 plugins: [ // plugin的配置 ], // 模式 mode: "development", }; 效果
并且此时，打包后的dist文档内，也没有第二个图片。
|
【本文地址】
公司简介
联系我们