webpack 知识点梳理

        1.webpack学习目的
        打包代码
        2.webpack使用意义
        压缩代码体积，代码降级，前端工程化
        3.如何使用webpack
        知识铺垫：package.json(记录包管理的文件)
        创建方法：npm init || yarn init (名称不能使用特殊符号和中文，其余步骤直接敲回车)
        安装依赖: npm install webpack webpack-cli -D 
        -D代表开发环境安装  -g代表全局安装
        运行webpack:webpack  
        创建自定义指令:package.json->scripts: 属性名是要执行的指令,属性值是命令行指令
        eg: "build":"webpack"
        4.打包配置:webpack.config.js
            1-入口和出口
            入口: entry:"路径"  出口:output:{path:路径,fileName:输出文件名}
            2-隔行变色案例
            使用打包后的js文件 ->dist目录下找到打包出的文件即可
            3-打包html：HtmlWebpackPlugin
            下包:htmlWebpackPlugin  
        注意：先引入再配置，
       配置打包文件路径:plugins:[new HtmlWebpackPlugin({ template: 'html存放路径' 
     // 告诉webpack使用插件时, 以我们自己的html文件作为模板去生成dist/html文件 })]
            4-样式loader加载器
            1.css-loader  2.style-loader 
            入口配置：module:{rules:[{
                test:'匹配对应文件'
                eg:test: /\.css$/i
                use:["style-loader", "css-loader"]
                loader的使用顺序是按照从右往左依次执行
            }]}
            5-less-loader 
            使用方法是和css同步，只不过需要多加一个loader再最后面
            6-打包图片
            test:/\.(jpg|gif|png|jpeg)/
            type:'asset'   
            如何图片小于8kb，会自动转成base64，否则会使用原文件
            图片转换为base64打包进js好处：浏览器不用发送请求，可以直接读取，速度快。
            图片转换为base64打包进js坏处：图片过大，转换base64图片所占内存会变大30%左右。
            7-字体图标
             test:/\.(eot|svg|ttf|woff|woff2)$/
            type:'asset/resource' 
            生成文件名字 - 定义规则  
            generator: { 
            filename: 'fonts/[name].[hash:6][ext]' // [ext]会替换成.eot/.woff
            }
            [name]:表示原文件的名字(不带后缀)
            [hash:数字]:表示使用生成指定位数的哈希值
            [ext]:表示原文件的后缀名(注意是带点。的)
            不论文件多大，都以原文件格式输出
            8-语法降级:babel-loader
            需要安装以下依赖：
            "@babel/core": "^7.13.15",  语法转移
            "@babel/preset-env": "^7.13.15",   转移规则
            "babel-loader": "^8.2.2",   babel语法识别
            配置规则只需要复制粘贴，不需要理解
            {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/, // 不去匹配这些文件夹下的文件
            use: {
                loader: 'babel-loader', // 使用这个loader处理js文件
                        options: { // 加载器选项
                            presets: ['@babel/preset-env'] 
                // 预设: @babel/preset-env 降级规则-按照这里的规则降级我们的js语法
                        }
                }
            }
        5.开发服务器
        1-需要下载webpack-dev-server    
        2-配置启动指令：scripts->"start":"webpack serve"
        3-可以使用指定端口打开对应服务：
        devServer: {
            port: 3000,
        },