webpack处理图片资源

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

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

1. 配置

javascript 复制代码

//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

css 复制代码

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

src/sass/index.sass

css 复制代码

.box3
  width: 100px
  height: 100px
  background-image: url("../images/cleaning-service.png")
  background-size: cover

src/styl/index.styl

css 复制代码

.box5
  width 100px
  height 100px
  background-image url("../images/orders.gif")
  background-size cover

4. 运行指令

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

css 复制代码

npx webpack

5. 输出资源情况

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

为什么样式资源没有呢？

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

6. 对图片资源进行优化

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

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

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

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

javascript 复制代码

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"
}