配置webpack优化图片文件

配置webpack优化图片文件 样式中的图片资源：

过去webpack4将图片资源通过 file-loader 和 url-loader 进行处理，Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。优点：减少请求次数；缺点：体积增大。

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      //使用这里的配置进行处理
      //配置解析样式中的图片
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: "asset",
        parser: {
          // 小于10kb的图片转base64
          // 优点：减少请求数量  缺点：体积会增大三分之一
          dataUrlCondition: {
            maxSize: 20 * 1024 // 20kb
          }
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        }
      },
    ],
  },
  plugins: [],
  mode: "development",
};

处理html中的图片资源：

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
//配置css相关
const cssBasicLoader = ["style-loader", "css-loader"]
//配置html-webpack-plugin 生成html
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/js/app.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器 
  module: {
    rules: [
      //配置解析css
      {
        test: /\.css$/i,   //正则表达式匹配以.css结尾的文件
        use: [...cssBasicLoader],
      },
      //配置解析less
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          ...cssBasicLoader,
          'less-loader',
        ],
      },
      //配置解析样式中的图片
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: "asset",
        parser: {
          // 小于10kb的图片转base64
          // 优点：减少请求数量  缺点：体积会增大三分之一
          dataUrlCondition: {
            maxSize: 2 * 1024 // 2kb
          }
        },
        generator: {
          // 将图片文件输出到 imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "imgs/[hash:8][ext][query]",
        }
      },
      //配置解析html中的图片
      {
        test: /\.html$/i,
        loader: "html-loader"
      }
    ]
  },
  // webpack中专门用于配置插件，插件必须经过实例化这一环节
  plugins: [
    //实例化  HtmlWebpackPlugin
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ],
  // 模式
  mode: "development", // 开发模式
};

处理html中的字体图标及其他资源：

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
//配置css相关
const cssBasicLoader = ["style-loader", "css-loader"]
//配置html-webpack-plugin 生成html
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/js/app.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  // 加载器 
  module: {
    rules: [
      //配置解析css
      {
        test: /\.css$/i,   //正则表达式匹配以.css结尾的文件
        use: [...cssBasicLoader],
      },
      //配置解析less
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          ...cssBasicLoader,
          'less-loader',
        ],
      },
      //配置解析样式中的图片
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: "asset",
        parser: {
          // 小于2kb的图片转base64
          // 优点：减少请求数量  缺点：体积会增大三分之一
          dataUrlCondition: {
            maxSize: 2 * 1024 // 2kb
          }
        },
        generator: {
          // 将图片文件输出到 imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "imgs/[hash:8][ext][query]",
        }
      },
      //配置解析html中的图片
      {
        test: /\.html$/i,
        loader: "html-loader"
      },
      //配置解析字体图标及其他资源 视频 音频等
      {
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ]
  },
  // webpack中专门用于配置插件，插件必须经过实例化这一环节
  plugins: [
    //实例化  HtmlWebpackPlugin
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ],
};

配置webpackdevserver

在五大模块同级下设置该配置项即可。

// 开发服务器
   devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },

后续看文档：

基本使用 | 尚硅谷 Web 前端之 Webpack5 教程。