## 1.安装npm install yarn -g
## 2.yarn -v 查看版本号
## 3.yarn init -y 初始化
## 4.yarn add -D webpack webpack-cli
## 5.yarn webpack
 defer 延迟加载
<script defer src="./fileMode.js"></script>
<!-- 配置在webpack.config.js里面 -->

## entry 指定文件打包路径
默认：index.js (约定俗成)
单个打包： entry:"./src/aaa.js" 单个入口
对象类型：
  entry:{
         hello:"./src/a1.js",
         say:"./src/a2.js"
    }
数组类型：
    entry:[
        "./src/a1.js",
        "./src/a2.js"
    ]

## mode 模式
    development 开发模式
    none 无
    production 生产模式

## output 出口
    使用path:const path = require("path")
    filename:"[name]-[id]-[hash].js",
    filename:"fileMode.js", //指定打包后的文件名称
    clean:true,//自动删除旧的打包文件 生成新的打包文件
    path:path.resolve(__dirname,"dist") //指定打包后的文件

## loader 加载器
  安装：yarn add -D css-loader style-loader
  module: { 名称
    rules: [ 规则
        { 
            test: /\.css$/, 匹配正则
            use: [ 使用的加载器内容：从后往前执行
                { loader: 'style-loader'}, 
                { loader: 'css-loader'}, 
                ]
             use:['style-loader','css-loader']
        },
        {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
        }
    ],
  },


## babel-loader 新的属性/特性在老版浏览器兼容
安装：yarn add -D babel-loader @babel/core @babel/preset-env
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }

默认适配浏览器列表
  "browserslist":[
    "defaults"，
    ....
  ]

## 插件 plugin
安装:yarn add -D html-webpack-plugin
  plugins: [new HtmlWebpackPlugin({
    title: "打包工具webpack" 标题
     template:"./src/demo.html" 模板
  })],
## 映射源码
  devtool:"inline-source-map"

## 开发服务器
1.yarn webpack --watch 自动打包
2.yarn add -D webpack-dev-server 服务器上的网址
启动命令 yarn webpack serve --open