webpack配置文件 `webpack.config.js`

​const path = require("path")
module.exports = {
   
   mode: "production",//设置打包的模式，production表示生产模式，development 开发模式
   // entry : "./hello/hello.js", //用来指定打包时的主文件 默认：./src/index.js
   // entry : ["./src/a.js","./src/b.js"], 代表打包两个文件；
   /* entry : {
           a : "./src/a.js",
           b : "./src/b.js" 
       },   会在dist中出现两个分别打包好的文件 文件前缀是key名 */  
   output : {
     // path : path.resolve(__dirname,"dist"), // 指定打包的目录，必须要绝对路径
     // filename: "main.js", //打包后的文件名；
     // filename: "[name]-[id]-[hash].js",
     // clean : true //自动清理打包目录
    }， //配置代码打包后的地址

  /*
   webpack默认情况下 ，只会处理js文件，如果我们希望它可以处理其他类型的文件 则要为其引入loader
   - 以css为例 ： 
      - 使用 css-loader 可以处理js中的样式
      - 使用步骤 ： 
        1. 安装： yarn add css-loader -D
        2. 配置：
             module : {
                 rules: [
                     {
                      test : /\.css$/i, //正则 以.css结尾
                      use : ["style-loader","css-loader"] //style-loader执行样式  前后顺序 
                                                              不可调换
                    }
                 ]
              }

  */
    module: {
        rules: [
            {
              test : /\.css$/i,
              use : ["style-loader","css-loader"]
            }，
            {
              test : /\.(jpg|png|gif)$/i,   //图片
              type : "asset/resource" // 图片等资源类型的数据，可以通过指定type来处理
             }
         ]
     }
 }

​