webpack的核心配置和各个元素的作用

// webpack用于静态资源的打包，是一个对象
// 核心配置包括入口文件，出口文件，loader加载器，插件plugin
// 以及Mode，用来区分不同的环境，因为不同的环境会有不同的逻辑
const {resolve} = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // entry:""入口文件,定义webpack以哪个模块开始
  entry: "./src/index.js",
  // Output{}出口文件，定义webpack在哪里输出他打包后的文件，以及怎命名
  output: {
    // 绝对路劲
    path: resolve(__dirname, "dist"),
    filename: "bundle.js",
    // 每一次打包自动清除dist
    clean: true,
  },
  //module:{} loader加载器，用来让webpack处理js以外的文件，可以在里面定义对着rules:[]
  module: {
    // 这里需要用到的有处理css 处理图片
    rules: [
      // 处理css
      {
        // 先用正则匹配到css
        test: /\.css$/i,
        // 需要使用用--save-dev安装好的loader
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      // 处理图片
      {
        // 先匹配到图片
        test: /\.(jpg|png|jpeg|webp|gif)$/i,
        // 把找到的图片看做资源
        type:"asset",
        // 生成的内容,ext表示后缀是什么就是什么，不限制是jpg还是png
        generator:{
            filename:"img/[hash:6][ext]"
        },
        // 图片还要转64编码
        parser:{
            // 这个单词意思是可以转64编码的条件
            dateUrlCondition:{
                maxSize:70*1024,  //最大是70kb
            },
        },
      },
    ],
  },
  // derServer 开发服务器的配置Mode，用来区分环境
  mode: "development",
  // 插件Plugins{},用来实现webpack的各支柱功能
  plugins: [
    // 配置一下开头导入的模块
    // 这是html的
    new HtmlWebpackPlugin({
        // 以哪一个为模板
        template:"./src/index.html",
        filename:"index.html",
        // 对代码优化
        minify:{
            collapseWhitespace:true,//清除空行
            removeComments:true, //清除注释
        },
    }),
    // 接着配置css的
    new MiniCssExtractPlugin({
        filename:"./css/index.css",
    }),
  ],

};