webpack学习之 less-loader file-loader url-loader 以及 认识asset module type

继续我们上一篇的webpack学习，现在我们进一步学习 其他的配置
安装：npm install less-loader url-loader file-loader -D
配置: package.config.js

 const path = require('path');

module.exports = {
 mode: "development",
 entry: "./src/main.js",
 output: {
   path: path.resolve(__dirname, "./build"),
   filename: "bundle.js"
 },
 module: {
   rules: [
     {
       test: /\.css$/,
       // loader:"css-loader" //写法一
       // use: ["css-loader"]//写法二
       // 写法三
       use: [
         { loader: "style-loader" },
         { loader: "css-loader" },
       ]
     },
     {
       test: /\.less$/,
       use: [
         "style-loader",
         "css-loader",
         "less-loader"
       ]
     },
    // {
     //   test: /\.(jpe?g|png|gif|svg)$/,
     //   use: {
     //     loader: "url-loader",
     //     options: {
     //       // outputPath: "img",
     //       name: "img/[name]_[hash:6].[ext]",
     //       limit: 100 * 1024
     //     }
     //   }
     // },
      // {
     //   test: /\.(eot|ttf|woff2?)$/,
     //   use: {
     //     loader: "file-loader",
     //     options: {
     //       // outputPath: "font",
     //       name: "font/[name]_[hash:6].[ext]"
     //     }
     //   }
     // },
     // webpack 5 asset写法
     {
        test: /\.(jpe?g|png|gif|svg)$/,
       type: "asset",
       generator: {
         filename: "img/[name]_[hash:6][ext]"
       },
       parser: {
         dataUrlCondition: {
           maxSize: 100 * 1024
         }
       }
      }
     }
   ]
 }
}