## 1.安装yarn
npm install yarn -g
## 2.初始化文件
yarn init -y
## 3.安装webpack
yarn add -D webpack webpack-cli
## 4.创建src文件夹  创建index.js文件
## 5.延迟加载
defer
## 6.webpack配置
webpack.config.js
## 7.entry 入口文件
确认打包的文件路径
### a. entry:'./src/a2.js'
### b. entry:['./src/a2.js','./src/a3.js']
### c. entry:{
        hi:'./src/a2.js',
        hello:'./src/a3.js'
    }
## 8.output 输出文件
filename 文件名字
clean 清除打包文件中其余的文件
path 打包文件夹输出
## 9.模式
生产模式 production
开发模式 development
## 10.loader插件
帮助用户在js页面引入样式 图片...
使用module配置
{
    test:"匹配内容",
    use:"匹配内容所用到的插件"
}
yarn add -D xxx-loader
npm install -D xxx-loader
## 11.babel
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"，
    可兼容的浏览器....
  ]
## 12.plugin插件
yarn add -D html-webpack-plugin
const HtmlWebpack = require("html-webpack-plugin")
    new HtmlWebpack({
        title:"哈哈哈哈",
        template:"./src/index.html"
    })
生成html页面 并自动连接

## 13.开发服务器
yarn add -D webpack-dev-server
启动：yarn webpack serve 开启开发服务器
yarn webpack serve --open 自动打包

## 14.映射源码
devtool:"inline-source-map"