webpack处理图片资源

过去在Webpack4时，我们处理图片资源通过file-loader和url-loader进行处理。

现在Webpack5已经将两个Loader功能内置到Webpack里了，我们只需要简单配置即可处理图片资源。

1. 配置

//webpack.config.js
const path = require("path");module.exports = {// 入口【相对路径】entry: './src/main.js',// 输出output: {// 文件的输出路径【绝对路径】// __dirname 当前文件的文件夹的绝对路径path: path.resolve(__dirname, 'dist'),// 文件的输出名称filename: 'main.js'},// 加载器module: {rules: [// loader 的配置// css样式{test: /\.css$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中]},// less样式{test: /\.less$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'less-loader',// 将less文件编译成css文件]},// sass样式{test: /\.s[ac]ss$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'sass-loader',// 将sass文件编译成css文件]},// stylus样式{test: /\.styl$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'stylus-loader',// 将Styl文件编译成css文件]},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: 'asset',}]},// 插件plugins: [// plugin的配置],/* 模式：开发模式：development生产模式：production*/mode: "development"
}

2. 添加图片资源

3. 使用图片资源

• src/less/index.less

  .box2 {width: 100px;height: 100px;background-image: url("../images/clean-window.jpeg");background-size: cover;
  }

• src/sass/index.sass

  .box3width: 100pxheight: 100pxbackground-image: url("../images/cleaning-service.png")background-size: cover

• src/styl/index.styl

  .box5width 100pxheight 100pxbackground-image url("../images/orders.gif")background-size cover

4. 运行指令

运行以下指令，然后打开index.html页面查看效果。

npx webpack

5. 输出资源情况

此时如果查看 dist 目录的话，会发现多了三张图片资源，因为 Webpack 会将所有打包好的资源输出到 dist 目录下。

为什么样式资源没有呢？

因为经过 style-loader 的处理，样式资源打包到main.js里面区了，所以没有额外输出出来。

6. 对图片资源进行优化

将小于某个大小的图片转化为data URL形式（Base64格式）

• 优点：减少请求数量
• 缺点：体积变得更大

此时当图片大小不超过10kb的图片就会以 data URL形式内置到js中了。

注意：需要将上次打包生成的文件清空，再重新打包才有效果。

const path = require("path");module.exports = {// 入口【相对路径】entry: './src/main.js',// 输出output: {// 文件的输出路径【绝对路径】// __dirname 当前文件的文件夹的绝对路径path: path.resolve(__dirname, 'dist'),// 文件的输出名称filename: 'main.js'},// 加载器module: {rules: [// loader 的配置// css样式{test: /\.css$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中]},// less样式{test: /\.less$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'less-loader',// 将less文件编译成css文件]},// sass样式{test: /\.s[ac]ss$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'sass-loader',// 将sass文件编译成css文件]},// stylus样式{test: /\.styl$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'stylus-loader',// 将Styl文件编译成css文件]},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: 'asset',parser: {dataUrlCondition: {// 小于10kb的图片会转成base64// 优点：减少请求数量；缺点：体积会变大maxSize: 10 * 1024}}}]},// 插件plugins: [// plugin的配置],/* 模式：开发模式：development生产模式：production*/mode: "development"
}