webpack 中 loader + plugins

        // webpack  静态化模块打包工具  模块化  现在化   ES module commonjs(nodejs) 

        // webpack 使用前提 安装  nodejs
        //         node - v
        //         npm - v


        // wenpack 的安装 目前分为两个  webpack  webpack cli


        // npm install  webpack  webpack - cli - g       // -g 代表全局安装
        // npm install webpack webpack - cli - d // -d 局部安装

        //         // es model 方式编写
        //         export function sum(num1, num2) {
        //             return num1 + num2
        //         }


        //         // commonjs  编写方式
        //         const price = function () { return '$ 99.99' }
        //         module.exports = {
        //             return price
        //         }
        //         webpack - v


        // 创建  package.json  文件  管理包依赖 创建其他的信息

        // 第一种创建方式  npm init(文件夹有中文的创建方式)
        // 第二种创建方式   npm inti - y   默认回车安装


        // vue  vuex vue - router  axios  都是生产依赖

        // 安装项目的 webpack 
        // npm  install webpack - cli - d 
        // 安装完成后会自动创建 package - lock.json 文件  和 node_module 文件

        // npx webpack 执行  局部的 webpack 指令(之前的写法)  实现打包执行  默认发布到 dist 文件中


        // 可以在 package.json文件   在 scripts  字段中 定义 webpack 的指令  例如 build: "webpack"
        // 控制台 打包执行指令  npm run build 
        // 打包时会默认在 src 文件下的  index.js  进行打包
        // 如果 没有index.js 是别的文件   可以在 webpack.config.js 中定义入口文件


        // 创建 webpack.config.js 定义配置文件
        //         定义入口
        module.exports = {
            // 入口
            entry: './src/main.js',
            // 出口
            output：{
            // 打包时创建的文件夹名称
            path: path.resolve(__dirname: ''./ build)；
            // 打包时创建的文件名称 
            filename: "js/bundle.js"
        }
// 在终端执行  npm run build 即可打包


        /**
         * 打包 html 文件
         * npm install 重新安装 package.json 中的相关依赖
         * 创建 element.js 文件 创建  DOM 元素 并进行创建 定义元素  追加到页面中去
         * import ''./element.js/ ''  在 index.js  引入即可打包  npm run build
        */



        /**
         * 打包 css 文件
         * 在 src  下创建  css 文件  index.css  定义css 文件
         * 在 element.js 引入 css  即可  import './css/index.css'
         * 
         * 安装 css  依赖   loader: 对模块源代码进行解析（转换） 
         * 
         * npm install  css - loader - g 开发  
         * 修改 webpack.config.js 进行配置 css
                module.exports = {
                    // 入口
                    entry: './src/main.js',
                    // 出口
                    output：{
                    // 打包时创建的文件夹名称
                    path: path.resolve(__dirname: ''./ build)；
                    // 打包时创建的文件名称 
                    filename: "js/bundle.js"
                }，
                module: {
                    rules: [
                        {
                            test: /\.css$/,
                            // 第一中写法
                            //loader:"css-loader"
                            // 第二种写法 完整写法
                            use: [
                                // {loader:"css-loader"}
                                "css-loader"
                            ]
                        }
                    ]
                }
            * npm run build 执行打包
        */

        /**
         * 安装 style-loader
         * npm install style-loader -d
         * 
         * 修该 微博package.config.js
         * 
         * module: {
                    rules: [
                        {
                            test: /\.css$/,
                            // 第一中写法
                            //loader:"css-loader"
                            // 第二种写法 完整写法
                            use: [
                                // {loader:"css-loader"}
                                "style-loader",
                                "css-loader"
                            ]
                        }
                    ]
                }
         * 
         *
         * 
        */



        /**
         * 安装  less 依赖
         * @coloe:red,
         * @textDections:undeline;
         * title{
         *  background-color:@color;
         *  text-dection:@textDections;
         * }
         * 
         * 在 element.js 中引入创建 less 文件
         * import '../css/title.less'
         * 
         * npm install less -d
         * npm install less-loader -d
         * 
         * 配置 webpack.config.js 文件  配置 less 
         * 
         *  module: {
                rules: [
                    {
                        test: /\.css$/,
                        // 第一中写法
                        //loader:"css-loader"
                        // 第二种写法 完整写法
                        use: [
                            // {loader:"css-loader"}
                            "style-loader",
                            "css-loader"
                        ]
                    },
                    {
                        test:/\.less$/,
                        use:[
                            "style-loader",
                            "css-loader",
                            "less-loader"
                        ]
                    }
                ]
            }
         * 
         * npm run build 进行打包
         * 
        */


        /**
         * post css   转换和适配
         * 自动加 浏览器 前缀  css 样式重置
         * 
         * npm install postcss  postcss-cli -D
         * 
         * 编写一个需要前缀的 css   需要安装  autoprefixer 插件
         * 
         * npm install autoprefixer -D   
         * -o  输出到哪里
         * npx postcss --use autoprefixer -o demo.css ./src/css/style.css
         * 
         * npm install postcss-loader -d
         * 
         * 修改 webpackage.config.js
         *   module: {
                rules: [
                    {
                        test: /\.css$/,
                        // 第一中写法
                        //loader:"css-loader"
                        // 第二种写法 完整写法
                        use: [
                            // {loader:"css-loader"}
                            "style-loader",
                            "css-loader",
                            // 第一种添加前缀的方式i
                            {
                                loader:"postcss-loader",
                                options:{
                                    postcssOptions:{
                                        plugins:{
                                            require('autoprefixer')
                                        }
                                    }
                                }
                            }
                        ]
                    },
                    {
                        test:/\.less$/,
                        use:[
                            "style-loader",
                            "css-loader",
                            "less-loader"
                        ]
                    }
                ]
            }
         * npm run build 
         * 
         * 对配置信息进行改进
         * 在 当前项目根目录下 创建   postcss-config.js 文件
         * 
         * 文件内容如下
         * module.exports ={
         *  plugins:[
         *      require(autoprefixer)
         *     ]
         * }
         * 
         * 修改 webpackage.config.js 文件
         * 
         *   module: {
                rules: [
                    {
                        test: /\.css$/,
                        // 第一中写法
                        //loader:"css-loader"
                        // 第二种写法 完整写法
                        use: [
                            // {loader:"css-loader"}
                            "style-loader",
                            "css-loader",
                            "postcss-loader"
                        ]
                    },
                    {
                        test:/\.less$/,
                        use:[
                            "style-loader",
                            "css-loader",
                            "less-loader"
                        ]
                    }
                ]
            }
        *
        * npm run bulid
        */


        /**
         * 
         * 安装  postcss-preset-env 插件
         * 事实上 在配置 postcss-loader 时 我们配置插件并不需要使用 autoprefixer 插件
         * 我们可以使用另外一个插件  postcss-preset-env 
         * 可以帮助我们将现代 css 特性，转成 大多数浏览器认识的 css  并且会根据目标浏览器或者运行时环境添加所需的  polyfill 
         * 也会自动帮助我们添加  autoprefixer （所以相当于已经内置了 autoprefixer ）
         * 
         * npm install postcss-preset-env -D
         * 
         * 修改 postcss.config.js  文件
         * module.exports ={
         *  plufins:[
         *      require('postcss-preset-env')
         *  ]
         * }
         * npm run build  // 可添加 浏览器前缀
         * 
         * color:#12345678;  // css 的新特性 新写法  后两位是透明度  
         * // postcss  可以将这种颜色方式进行转换
         * 
         * 
         * 更新 webpackage.config.js  文件  module 的写法
         *  module: {
                rules: [
                    {
                        test: /\.css$/,
                        // 第一中写法
                        //loader:"css-loader"
                        // 第二种写法 完整写法
                        use: [
                            // {loader:"css-loader"}
                            "style-loader",
                            "css-loader",
                            "postcss-loader"
                        ]
                    },
                    {
                        test:/\.(less|css)$/,
                        use:[
                            "style-loader",
                            "css-loader",
                            "less-loader"
                        ]
                    }
                ]
            }
         * 
        */




        /**
         * 打包  img  资源文件 
         * 
         * 定义  images  文件 
         * 
         * npm install
         * 
         * 在 src  中定义  img文件 并存放 图片
         * 
         * // 第一种方式设置背景图片
         * 
         * 在 src/element.js文件中书写
         * const bgDivEl = document.createElement('div');
         * bgDivEl.className = "image-bg";
         * document.body.appendChild(bgDivEl);
         * 
         * 定义 src/css/image.css  文件
         * .image-bg{ background-image:url('../img/');width:200px;height:200px; }
         * 
         * 
         * 在 src/element.js 文件中引入  import '../src/css/image.css'
         * 
         * file-loader    webpack 4 时用的  webpack5 已经将 file-loader 其废弃了
         * 负责处理  jpg、png  等格式图片 我们也需要有对应的 loader:file-loader
         * 
         * 作用： file-loader  的作用就是处理 import/require() 方式 引入 的一个文件资源，并将它放到我们输出的文件夹中
         * npm install file-loader -d
         * 
         * 修改 webpackage.config.js  配置
         * 
         * module:{
         *  rules:[
         *      {
         *          css...
         *      },
         *      {
         *          test:/\.(jpe?g | png | gif | svg)$/,
         *          use:"file-loader"
         *      }
         *  ]
         * }
         * 
         * npm run build 
         *  此时会在 build(dist) 中输入 图片的文件
         * 
         * 
         * 第二中方式   
         * 设置图片的 src  的图片资源
         * 
         * 在 src/js/elemen.js 文件中定义
         * import zznhImg from '../img/zznv.png';
         * const imgEl = document.createElement('img');
         * imgEl.src=zznhImg;
         * document.body.appendChild(imgEl)
         * 
         * npm run build 
         * 
         * 
         * 
         * 进行  图片 打包的处理  
         * 
         * 一 、 修改图片 打包后的文件夹
         * 文件的命名规则
         * 可以使用 PlaceHolder 来完成，webpack 给我们提供了大量的 PlaceHolder 来显示不同的内容
         * 这里介绍几个常用的 placeholder  
         * [ext]  处理文件的拓展名
         * [name]  处理文件的名曾
         * [hash]  文件的内容，使用 MD4 的散列函数处理，生成的一个 128 位的 hash 值(32 个十六进制)
         * [contentHash] 在 file-loader  中 和 [hash] 结果是一致的(在 webpack 的一些其他地方不一样)
         * [hash:<length>]:  截图 hash 的长度，默认 32 个字符串太长了
         * [path] 文件相对于 webpack 配置文件的路径
         * 
         * 
         * 修改  webpackage.config.js  文件
         *   module:{
         *  rules:[
         *      {
         *          css...
         *      },
         *      {
         *          test:/\.(jpe?g | png | gif | svg)$/,
         *          use:[
         *              loader:"file-loader",
         *              options:{
         *                  // 打包发布时的文件夹
        //  *                  outputPath:'img', // 设置打包发布时的文件名称
                            // 如果不写 outputPath 也有第二种方式
         *                  name:"img/[name]_[hash:6].[ext]"
                            // 解析 img / 是发布后的文件名称 [name] 发布时的图片名  [hash:6] 图片后面带的 hash 值 防止文件重复使用  [ext] 代表图片文件的后缀  可以打包多种文件后缀
         *              }
         *          ]
         *      }
         *  ]
         * }
         * 
         * 
         * url-loader    可以 替代 file-loader 
         * url-loader  和 file-loader  的工作方式是相似的 ，但是可以将较小的文件 转成  base64 的 URL 
         * 
         * npm install url-loader -D
         * 
         * 修改 webpackage.config.js 文件
         * 
         * module:{
         *   rules:[
         *      {
         *          css...
         *      },
         *      {
         *          test:/\.(jpe?g | png | gif | svg)$/,
         *          use:[
         *              loader:"url-loader",
         *              options:{
         *                  name:"img/[name]_[hash:6].[ext]",
         *                  limit:100 * 1024  // 小于 100KB 的图片文件进行 进行编码 大的进行打包
         *              }
         *          ]
         *      }
         *  ]
         * }
         *  npm run build 
         * 
         * 
         * asset  module type   *****
         * 安装都不需要安装
         * webpack 版本是 webpack5    webpack -v
         * 在  webpack 5 之前，加载这些资源我们需要使用一些 loader,比如 raw-loader、url-loader、file-loader;
         * 在  webpack 5 开始，我们可以直接使用 资源模块类型(asset module type) 来替待上面的这些loader
         * 
         * 资源模块类型(asset module type) 通过添加 4 种 新的类型，来替换所有的这些 loader
         * asset/resource 发送一个单独的文件并导出 URL, 之前通过使用  file-loader 实现
         * asset/inline 导出一个资源 的 data URL ，之前通过使用 url-loader 实现
         * asset/source 导出资源的源代码，之前通使用 raw-loader 实现
         * asset  在导出一个 data URL 和发送一个单独的文件之间自动选择，之前通过使用  url-loader ，并且配置资源体积限制实现
         *
         * 修改 webpackage.config.js 文件
         *  module:{
         *   rules:[
         *      {
         *          css...
         *      },
         *      {
         *          test:/\.(jpe?g | png | gif | svg)$/,
         *          type:"asset",
         *          generator:{
         *              filename:"img/[name]_[hash:6][ext]"
         *          },
         *          parser:{
         *              dataUrlCondition:{
         *                  maxSize:100 * 1024
         *              }
         *          }
         *      }
         *  ]
         * }
         *  npm run build 
         * 
         * 
         * 
        */





        /**
         *  关于 字体文件的打包 
         *  如果需要使用 某些 特殊的字体或者字体图标，那么我们会引入很多  字体相关的文件，这些文件的处理也是一样的
         * 首先，先从 阿里图标 库中下载 几个字体图标
         * src/font    ..... iconfont.css   iconfont.eot .....
         * 
         * 在 src/js/element.js 文件中添加
         * import '../font/iconfont.css';
         * const iEl = document.createElement("i");
         * iEl.className = "iconfont icon-ashbin";
         * document.body.appentChild(iEl)
         * 
         *
         * 修改 webpackage.config.js 文件
         *  // 第一种 字体打包的方式 使用  file-loader
         *  module:{
         *   rules:[
         *      {
         *          css...
         *      },
         *      {
         *          test:/\.(jpe?g | png | gif | svg)$/,
         *          type:"asset",
         *          generator:{
         *              filename:"img/[name]_[hash:6][ext]"
         *          },
         *          parser:{
         *              dataUrlCondition:{
         *                  maxSize:100 * 1024
         *              }
         *          }
         *      },
         *      {
         *          test:/\.(eot|ttf|woff2?)$/,
         *          use:[
         *              loader:"file-loader",
         *              options:{
         *                  // outputPath:'font',
         *                  name:"font/[name]_[hash:6].[ext]"
         *              }
         *          ]
         *      }
         *  ]
         * }
         * npm run build
         * 
         * 
         * 第二种打包字体文件的方式 使用  asset
         * 
         * 修改 webpackage.config.js 文件
         *module:{
         *   rules:[
         *      {
         *          css...
         *      },
         *      {
         *          test:/\.(jpe?g | png | gif | svg)$/,
         *          type:"asset",
         *          generator:{
         *              filename:"img/[name]_[hash:6][ext]"
         *          },
         *          parser:{
         *              dataUrlCondition:{
         *                  maxSize:100 * 1024
         *              }
         *          }
         *      },
         *      {
         *          test:/\.(eot|ttf|woff2?)$/,
         *          type:"asset/resource",
         *          generator:{
         *              filename:"font/[name]_[hash:6][ext]"
         *          }
         *      }
         *  ]
         * }
         * npm run build
         * 
        */


        /**
         * webpack 中插件的使用  
         * npm init 
         * 
         * 
         * 一、自动打包 插件
         * Plugin 插件
         * webpack 的另一个 核心是 Plugin 
         * Loader  用于特定的模块类型的转化
         * Plugin  用于执行 更加广泛的任务 比如打包优化、资源管理、环境变量注入等
         * 
         * CleanWebpackPlugin
         * 
         * npm install clean-webpack-plugin -D 
         * 
         * 
         * 修改 wenapckage.config.js 文件
         * 
         * const { CleanWebpackPlugin } = require('clean-webpack-plugin')
         *  module.exports = {
         *  入口
         *  entry: './src/main.js',
         *  出口
         *  output：{
         *  },
         *  module:{
         *  },
         *  plugins:[
         *      new CleanWebpackPlugin()
         *  ]
         * 
         * npm run build  // 会把之前的 打包文件删除 重新发布新的打包文件
         * 
         * 
         * 
         * 二、打包 html  
         * HtmlWebpackPlugin
         * 我们的 HTML文件 试编写在 根目录下的，而最终打包的 dist 文件夹中是没有 index.html 文件的
         * 在进行项目部署时，必然也是需要有对应的入口文件 index.html
         * 所以需要对 idnex.html 进行打包处理
         * 对 HTML 进行打包 安装  HtmlWebpackPlugin 插件
         * 
         * npm install html-webpack-plugin -D
         * 
         * 首先如果根目录下有 index.html 文件时可以先进行删除
         * 
         * 修改 webpackage.config.js 文件 
         * 
         * import  HtmlWebpackPlugin = require('html-webpack-plugin')
         *module.exports = {
         *  入口
         *  entry: './src/main.js',
         *  出口
         *  output：{
         *      path: path.resolve(__dirname: ''./ build)；
         *      filename: "js/bundle.js"
         *  },
         *  module:{
         *  },
         *  plugins:[
         *      new CleanWebpackPlugin(),
         *      new HtmlWebpackPlugin()
         *  ]
         * 
         * npm run build 
         * 
         * 
         * 
         * 
         * 三、 DefinePlugin 
         * 此插件是 webpack 内置的 插件
         * 自定义模板数据填充
         * 上面的代码中  会有一些类似的语法  <% 变量 %>  这个是 EJS 模块填充数据的方式 
         * 在 配置 HtmlWebpackPlugin  时，我们可以添加如下配置：
         *      template: 指定我们要使用的模块所在的路径
         *      title : 在进行  htmlWebpackPlugin.options.title 读取时，就会读到该信息
         * 
         * 但是，这个时候编译还会报错，因为在模块中还使用到一个 BASE_URL的常量
         * 例如错误示范 <link rel="icon" href="<% = BASE_URL %>favicon.ico">;
         * 
         * 
         * 例如 创建  public 文件  里面包含  favicon.ico 和 index.html 文件  其中index.html 文件可以从vue 项目中复制过来  可有可无
         * 
         * 里面的 有 BASE_URL   值 打包会报错  解决方法是  安装DefinePlugin 插件即可 
         * 
         * 修改  webpack.config.js  文件
         * const { DefinePlugin } = require("webpack");
         * module.exports = {
         *  入口
         *  entry: './src/main.js',
         *  出口
         *  output：{
         *      path: path.resolve(__dirname: ''./ build)；
         *      filename: "js/bundle.js"
         *  },
         *  module:{
         *  },
         *  plugins:[
         *      new CleanWebpackPlugin(),
         *      new HtmlWebpackPlugin({
         *          template:"./public/index.html",
         *          title:"哈哈哈哈"
         *      }),
         *      new DefinePlugin({
         *          BASE_URL:"./"
         *      })
         *  ]
         * 
         * npm run build 
         *  
         * 
         * 
        */

        /**
         * 四、 CopyWebpackPlugin   文件拷贝 
         * 例如  复制  public 文件中的  favicon.ico  文件到 build(dist)  文件中
         * 
         * npm install copy-webpack-plugin -D
         * 
         * 修改 webpack.config.js  文件
         * const CopyWebpackPlugin = require('copy-webpack-plugin');
         * 
         * module.exports = {
         *  入口
         *  entry: './src/main.js',
         *  出口
         *  output：{
         *      path: path.resolve(__dirname: ''./ build)；
         *      filename: "js/bundle.js"
         *  },
         *  module:{
         *  },
         *  plugins:[
         *      new CleanWebpackPlugin(),
         *      new HtmlWebpackPlugin({
         *          template:"./public/index.html",
         *          title:"哈哈哈哈"
         *      }),
         *      new DefinePlugin({
         *          BASE_URL:"./"
         *      }),
         *      new CopyWebpackPlugin({
         *          patterns:[
         *              {
         *                  from:"public",
         *                  to:"./",
         *                  // 忽略复制的文件
         *                  globOptions:{
         *                      ignore:[
         *                          "**/index.html"
         *                      ]
         *                  }
         *              }
         *          ]
         *      })
         *  ]
         * 
         * npm run build 
         * 
         * 
        */



        /**
         * Mode  配置 
         * 
         * 修改 webpack.config.js 文件
         * 
         * const path = require("path");
         * const { CleanWebpackPlugin } = require('clean-webpack-plugin');
         * const  HtmlWebpackLogin  = require("html-webpack-plugin");
         * const { DefinePlugin } = require("webpack");
         * const  CopyWebpackPlugin = require('copy-webpack-plugin');
         * 
         * module.exports = {
         *  // 设置模式
         *  // development  开发阶段，设置 development
         *  // production  准备打包上线的时候 设置 production
         *  mode:"development",
         *  // 设置  source-map  建立 js  映射文件，方便调试代码和错误
         *  devtool:"source-map",
         * 
         *  // 入口
         *  entry: './src/main.js',
         *  // 出口
         *  output：{
         *      path: path.resolve(__dirname: ''./ build)；
         *      filename: "js/bundle.js"
         *  },
         *  module:{
         *  },
         *  plugins:[
         *      new CleanWebpackPlugin(),
         *      new HtmlWebpackPlugin({
         *          template:"./public/index.html",
         *          title:"哈哈哈哈"
         *      }),
         *      new DefinePlugin({
         *          BASE_URL:"./"
         *      }),
         *      new CopyWebpackPlugin({
         *          patterns:[
         *              {
         *                  from:"public",
         *                  to:"./",
         *                  // 忽略复制的文件
         *                  globOptions:{
         *                      ignore:[
         *                          "**/index.html"
         *                      ]
         *                  }
         *              }
         *          ]
         *      })
         *  ]
         * 
         * npm run build 
         * 
         * 
         * 
         * 
        */


        
        /**
         * Babel  和  devServer 
         * 
         * 简单来说，就是将 ES6  代码编译转换为 ES5 语法
         * 
         * 为什么需要 babel 
         * 事实上，在开发中我们很少去直接接触 bebel , 但是 babel 对于前端开发来说，目前是 不可缺少的一部分：
         *      在开发中，我们想要使用 ES6+ 的语法，想要使用 TypeScript ,开发 React  项目，它们都是离不开 Babel 的
         *      所以，学习  Babel 对于我们理解代码从编写到线上的转变过程至关重要
         * 
         * Bebel 是一个工具链，主要用于旧浏览器或者环境中将 ESMAScript 2015+ 代码转换为向后兼容版本的 JavaScript
         * 包括：语法转换、源代码转换等；
         * 
         * babel 本身可以作为 一个独立的工具（和 postcss 一样），不和 webpack 等构建工具配置来单独使用
         * 如果我们希望在命令行尝试使用 babel 需要安装如下库:
         *  @babel/core:babel 的核心代码，必须安装
         *  @babel/cli: 可以让我们在命令行使用 babel 
         * 
         * 使用 babel  来处理我们的源代码
         *      src: 是源文件的目录
         *      --out-dir: 指定输出的文件夹 dist
         * 
         * 
         * 在根目录下创建  demo.js 文件
         * // 书写里面的内容
         * const message = "Hello World";
         * const names = ["abc","cba","nab"];
         * names.forEach(item => console.log(item))
         * 
         * npm install @babel/core  @babel/cli -D
         * 
         * npx babel demo.js --out-file text.js    // file 代表输出文件名  test.js 输出的文件
         * 
         * 比如 我们需要转换 箭头函数，那么我们就可以使用箭头函数转换相关的插件 
         * 
         * // 转换 箭头函数的插件
         * npm install @babel/plugin-transform-arrow-functions -D
         * npx babel demo.js --out-file text.js --plugins=@babel/plugin-transform-arrow-functions
         * 
         * // 转换 ES6 的 const 等 块级作用域的插件
         * npm install @babel/plugin-transform-block-scoping -D
         * npx babel demo.js --out-file text.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
         * 
         * 
         * Bebel 的预设 preset
         * 但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）;
         *      后面我们再具体来讲预设代表的含义
         * 安装 @babel/preset-env 预设
         * 
         * npm install  @babel/preset-env -D 
         * npx babel demo.js --out-file text.js --presets=@babel/preset-env
         * 
         * 
         * 
         * Bebel 的底层原理
         * 
         * babel 是如何做到将 我们的一段代码 (ES6,TypeScript,React) 转换成另外一段代码 (ES5) 的呢？
         *      从一种源代码（原生代码）转换成 另一种源代码(目标语言)
         *      就是 编译器，事实上我们可以将 Babel 看成就是一个编译器
         *      Babel 编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码
         * 
         * Babel 也拥有编译器的工作流程:
         *      解析阶段（Parsing）
         *      转换阶段（Transformation）
         *      生成阶段（Code Generation）
         * 
         * 
         * 
         * babel-loader  
         * 默认  webpack 在打包的时候不会把 src 下面的根目录中的 main.js(可能是其他文件名)  中的  ES6 语法进行编译的所以需要安装 babel-loader  
         * npm install babel-loader -D
         * 
         * 修改 webpack.config.js 文件
         * 
         * module:{
         *   rules:[
         *      {
         *          css...
         *      },
         *      {
         *          test:/\.(jpe?g | png | gif | svg)$/,
         *          type:"asset",
         *          generator:{
         *              filename:"img/[name]_[hash:6][ext]"
         *          },
         *          parser:{
         *              dataUrlCondition:{
         *                  maxSize:100 * 1024
         *              }
         *          }
         *      },
         *      {
         *          test:/\.(eot|ttf|woff2?)$/,
         *          use:[
         *              loader:"file-loader",
         *              options:{
         *                  // outputPath:'font',
         *                  name:"font/[name]_[hash:6].[ext]"
         *              }
         *          ]
         *      },
         *      {
         *          test:/\.js$/,
         *          use:{
         *              loader:"babel-loader",
         *              options:{
         *                  // plugins:[
         *                  //     "@babel/plugin-transform-arrow-functions",
         *                  //     "@babel/plugin-transform-block-scoping",
         *                  // ]
         *                  
         *                  // 对上面的 四行代码进行简化
         *                  presets:[
         *                      "@babel/preset-env"
         *                  ]
         *              }
         *          }
         *      }
         *  ]
         * }
         * npm run build
         * 
         * 
         * 
         * Babel  的配置文件
         * 
         * 像之前一样，我们可以将 babel 的配置信息放到一个独立的文件中，babel 给我们提供了两种配置文件的编写
         *      babel.config.json (或者 .js .cjs  .mjs) 文件
         *      .babelrc.json (或者 .babelrc   .js  .cjs  .mjs) 文件
         * 
         * 上面两个的区别  目前很多的项目都采用了多包管理的方式 (babel 本身，element-plus,umi 等)
         *      .babelrc.json : 早期使用较多的配置方式，但是对于配置 Monorepos 项目是比较麻烦的;
         *       babel.config.json (babel7): 可以直接作用于 Monorepos 项目的子包，更加推荐
         * 
         * 
         * 在 webpack.config.js  文件的同级创建  
         * babel.config.js  文件
         * // 书写配置
         * module.exports ={
         *    presets:[
         *       "@babel/preset-env"
         *    ]
         * }
         * 
         * // 修改 webpack.config.js 文件
         * module:{
         *   rules:[
         *      {
         *          css...
         *      },
         *      {
         *          test:/\.(jpe?g | png | gif | svg)$/,
         *          type:"asset",
         *          generator:{
         *              filename:"img/[name]_[hash:6][ext]"
         *          },
         *          parser:{
         *              dataUrlCondition:{
         *                  maxSize:100 * 1024
         *              }
         *          }
         *      },
         *      {
         *          test:/\.(eot|ttf|woff2?)$/,
         *          use:[
         *              loader:"file-loader",
         *              options:{
         *                  // outputPath:'font',
         *                  name:"font/[name]_[hash:6].[ext]"
         *              }
         *          ]
         *      },
         *      {
         *          test:/\.js$/,
         *          loader:"babel-loader"
         *      }
         *  ]
         * }
         * npm run build
         * 
         * 
         * 
        */




       
        /**
         * 打包 vue  代码 
         * 
         * npm install 
         * 
         * // 安装 vue  
         * npm install vue@next
         * 
         * // 配置  js 文件 
         * 例如：src  根目录下的  main.js 文件
         * 
         * // 配置代码
         * import { sum }  from "./js/math";
         * // 指定引入的 vue 版本
         * import { createApp } from 'vue/dist/vue.esm-bundler';
         * const { priceFormat } = require("./js/format");
         * 
         * import './js/element';
         * 
         * console.log(sum(20,30));
         * console.log(priceFormat());
         * 
         * // 创建 vue  
         * const App ={
         *      template:`<h1>创建的 vue 代码<h1>`，
         *      data(){
         *          return{
         *              title:"hello World !"
         *          }
         *      }
         * } 
         * 
         * Vue.createApp(App).mount("#app")
         * 
         * 
         * npm run build  //  指定版本后 此时页面会渲染出来数据  
         * 
         * 
         * Vue 打包后不同版本解析
         * // 第一个版本
         * vue(.runtime).global(.prod).js: 
         *      通过 浏览器中的  <script src="..."> 直接使用
         *      我们之前通过 CDN 引入和下载的 Vue 版本就是这个版本
         *      会暴露一个全局的 Vue 来使用
         * 
         * // 第二个版本
         * vue(.runtime).esm-browser(.prod).js 
         *      用于通过原生 ES 模块导入使用(在浏览器中通过 <script type="module"> 来使用)
         * 
         * 
         * // 第三个版本
         * vue(.runtime).esm-bundler.js:
         *      用于 webpack  rollup 和 parcel  等构建工具
         *      构建工具中默认是 vue.runtime.esm-bundler.js
         *      如果我们需要解析模板 template,那么需要手动指定 vue.esm-bundler.js
         * 
         * 
         * 
         * 运行时 + 编译器 vs  仅运行时
         * 
         * 在 Vue 的开发过程中我们有 三种方式 来编写 DOM 元素:
         *      方式一:template 模板的方式(之前经常使用的方式)
         *      方式二:render 函数的方式，使用 函数来编写渲染的内容
         *      方式三:通过 .vue 文件 中的 template 来编写模板
         * 
         * 它们的模板分别是如何处理的？
         *      方式二中的函数可以直接返回一个 虚拟节点，也就是 Vnode 节点
         *      方式一和方式三的 template 都需要有特定的代码来对齐进行解析：
         *          方式三 .vue 文件中的 template 可以通过 在 vue-loader 对其进行编译和处理
         *          方式一种的 template 我们必须要通过源码中一部分代码来进行编译
         * 
         * 所以，Vue 在让我们选择版本的时候分为  运行时+编译器 vs 仅运行时
         *     运行时 + 编译器 包含了对 template  模板的编译代码，更加完善，但是也更大一些
         *     仅运行时没有包含对 template 版本的编译代码，相对更小一些
         * 
         *      
         * 
        */
       



        /**
         * 
         * VSCode 对 SFC 文件的支持
         *  在前面我们提到过，真实开发中多数情况下我们都是使用 SFC (single-file components(单文件组件)).
         * 
         * VSCode 对 SFC 的支持
         *     插件一： Vetur,从 Vue2 开发就一直在使用的  VSCode 支持的  Vue 插件
         *     插件二： Volar,官方推荐的插件（后续会基于 Volar  开发官方的 VSCode 插件）
         * 
         * 
         * 
         * 实现将  vue 的 模板 视图 样式 代码书写到一个 .vue 文件中
         * 
         *
         * 在 src  文件下创建 vue/App.vue 
         * // 编写代码
         * <template>
         *      <h2>我是 vue 渲染出来的</h2>
         *      <h2>{{title}}</h2>
         * </template>
         * 
         * <script>
         *      export default {
         *          data(){
         *              return{
         *                  title:"Hello World",
         *                  message:"哈哈哈"
         *              }
         *          }
         *      },
         *      methods:{
         *      }
         * </script>
         *
         *<style>
         *    h2{
         *        color: red;
         *    }
         *</style>
         * 
         * 
         * 在 src 的根 main.js(index.js) 文件中 编写  
         * // 配置代码
         * import { sum }  from "./js/math";
         * // 指定引入的 vue 版本
         * import { createApp } from 'vue/dist/vue.esm-bundler';
         * const { priceFormat } = require("./js/format");
         * 
         * import App from './vue/App.vue';
         * 
         * import './js/element';
         * 
         * console.log(sum(20,30));
         * console.log(priceFormat());
         * 
         * const app = createApp(App);
         * app.mount("#app")
         * 

         // 安装 vue-loader 
         * npm install vue-loader@next -D
         * npm install @vue/compiler-sfc -D
         * 
         * 
         * 
         * // 修改 webpack.config.js 文件
         * const { VueLoaderPlugin }  = require('vue-loader/dist/index')
         * module:{
         *   rules:[
         *      {
         *          css...
         *      },
         *      {
         *          test:/\.(jpe?g | png | gif | svg)$/,
         *          type:"asset",
         *          generator:{
         *              filename:"img/[name]_[hash:6][ext]"
         *          },
         *          parser:{
         *              dataUrlCondition:{
         *                  maxSize:100 * 1024
         *              }
         *          }
         *      },
         *      {
         *          test:/\.(eot|ttf|woff2?)$/,
         *          use:[
         *              loader:"file-loader",
         *              options:{
         *                  // outputPath:'font',
         *                  name:"font/[name]_[hash:6].[ext]"
         *              }
         *          ]
         *      },
         *      {
         *          test:/\.js$/,
         *          loader:"babel-loader"
         *      },
         *      {
         *          test:/\.vue$/,
         *          loader:"vue-loader"
         *      }
         *  ]
         * },
         *  plugins:[
         *      new CleanWebpackPlugin(),
         *      new HtmlWebpackPlugin({
         *          template:"./public/index.html",
         *          title:"哈哈哈哈"
         *      }),
         *      new DefinePlugin({
         *          BASE_URL:"./"
         *      }),
         *      new CopyWebpackPlugin({
         *          patterns:[
         *              {
         *                  from:"public",
         *                  to:"./",
         *                  // 忽略复制的文件
         *                  globOptions:{
         *                      ignore:[
         *                          "**/index.html"
         *                      ]
         *                  }
         *              }
         *          ]
         *      }),
         *     new VueLoaderPlugin()
         *  ]
         * npm run build
         *
         *
         *// 由此运行成功  可以创建 .vue 文件  将其 定义为局部组件  并在 主组件中进行引入 注册 
         * npm run build  // 成功  可以编写多个组件
         * 注意 要求定义每个组件时都要暴露  
         *  export default {
         *      data(){
         *         return {}
         *      }
         *  }
         *
        */
       
        /**
         * vue_options_api  对 vue2 做适配
         *
         * 修改消除的一些警告
         * 修改 webpack.config.js 文件
         *
         *module:{
         *   rules:[
         *      {
         *          css...
         *      },
         *      {
         *          test:/\.(jpe?g | png | gif | svg)$/,
         *          type:"asset",
         *          generator:{
         *              filename:"img/[name]_[hash:6][ext]"
         *          },
         *          parser:{
         *              dataUrlCondition:{
         *                  maxSize:100 * 1024
         *              }
         *          }
         *      },
         *      {
         *          test:/\.(eot|ttf|woff2?)$/,
         *          use:[
         *              loader:"file-loader",
         *              options:{
         *                  // outputPath:'font',
         *                  name:"font/[name]_[hash:6].[ext]"
         *              }
         *          ]
         *      },
         *      {
         *          test:/\.js$/,
         *          loader:"babel-loader"
         *      },
         *      {
         *          test:/\.vue$/,
         *          loader:"vue-loader"
         *      }
         *  ]
         * },
         *  plugins:[
         *      new CleanWebpackPlugin(),
         *      new HtmlWebpackPlugin({
         *          template:"./public/index.html",
         *          title:"哈哈哈哈"
         *      }),
         *      new DefinePlugin({
         *          BASE_URL:"./",
         *          // 用于消除部分警告
         *          __VUE_OPTIONS_API__: true,
         *          __vue_PROD_DEVTOOLS__:false
         *      }),
         *      new CopyWebpackPlugin({
         *          patterns:[
         *              {
         *                  from:"public",
         *                  to:"./",
         *                  // 忽略复制的文件
         *                  globOptions:{
         *                      ignore:[
         *                          "**/index.html"
         *                      ]
         *                  }
         *              }
         *          ]
         *      }),
         *     new VueLoaderPlugin()
         *  ]
         * npm run build
         * 
         * 
         * // 修改 src 下的跟文件 main.js(index.js)
         * 
         * 将 import { createApp } from 'vue/dist/vue.esm-bundler';
         * 改为 import { createApp } from 'vue';
         * 
         * npm run build 
        */
       



        /**
         * 
         * 
         * 
         * 
        */
       


        /**
         * 
         * 
         * 
         * 
        */