前端：webpack常用插件

插件：
1.什么是插件：用于扩展webpack的功能【每个插件的详细请自己去看文档】
         注： loader其实也是一种插件，但它只专注于处理文件这一块
         使用步骤：下载插件----->在webpack.config.js中的plugins[]中实例化----->配置插件[可选]
                    ---->配置文件中导入require("插件名称")




2.HtmlWebpackPlugin:
            作用：自动生成index.html文件，并引入打包好的js、css文件
            注意：如果不需要生成的html文件，而是要使用自己已经编写好的html文件
                  则需要在实例化插件的时候传入配置对象；即：
                  new HtmlWebpackPlugin({template:"你的html文件所在路径.html"})
                  其它配置项请详见：
                                https://github.com/jantimon/html-webpack-plugin#options




3.CleanWebpackPlugin:
            作用：清空上一次打包的目录 [由于打包后的输出目录可能可能会遗留上一次打包的文件，我们只希望打包后的目录只有本次打包的文件]
            下载地址：自己去guithub上搜索


4.CopyWebpackPlugin:
            作用：打包过程中除了需要打包的js css等文件，我么可能也要拷贝一些文档到指定目录；那么就可以使用该插件
            配置：{form:'源文件目录',to:'目标文件目录'}




5.MiniCssExtractPlugin:【如果想要进行压缩，还需配合optimize-css-assets-webpack-plugin使用】
            作用：将打包后的css文件输出到指定目录
            下载地址：github上自己搜
            注意:将style-loader替换为MiniCssExtractPlugin.loader


6.OptimizeCssAssetsWebpackPlugin
            作用：压缩css文件
            【注意】：配置该插件以后会覆盖掉webpack原有的js压缩，如果需要进行js的压缩，
                      还需要使用插件 TerserWebpackPlugin来压缩js代码


7.webpack自带的watch配置【不常用】
            watch作用：监听打包涉及的源文件的变化，发生变化则及时打包，并更新页面【提升了开发效率】
            开启watch：只需要在webpack.config.js中新增配置 watch:true 即可
            watch相关配置：只需要在webpack.config.js中新增 watchOptions:{ watch配置项...}
            例如watchOptions:{
                                aggregateTimeOut:300,//设置防抖时间【监听到了变化，但还在修改中，则让webpack等到输入完成后300ms再更新打包】
                                poll:1000, //每隔1000ms检查一次文件是否发生变化
                                ignore:/node_modules/   //放弃对node_modules文件夹的监听【比较大的文件可以忽略监听】
                            }




8.dev-Server:【开发服务器】【常用】【通过dev-Server打包的文件是放在内存中的，这样做是为了提升性能】
            作用：①将我们的项目运行在一个服务器的环境下
                  ②解决开发过程中的跨域问题
                  ③像watch一样实时监听源文件的变化，自动打包，自动刷新网页
            注意：打包指令后需要加上 -dev-server
            配置：webpack.config.js中增加
            devServer:{
                contentBase:"./bundle",//告诉服务器所发布的内容是哪个文件夹下的;建议使用绝对路径
                open:true,//告诉devServer打包完成后自动打开浏览器
                port:3000,//指定监听端口
                hot:true,//开启热更新【不会自动刷新网页】
                hotOnly:true,//哪怕不支持热更新也不要刷新网页
                proxy:{
                    "/user":{
                        target:"http://127.0.0.1:3000" //代理服务器;当请求到该地址/user时，会被该代理服务器监听到，
                                            //由该代理服务器发送请求，并响应【相当于中转请求和响应；因为跨域只存在于客户端发送请求】
                    }
                }
            }


            【注意】需要代理多个API地址可以用proxy:[
                                                    context:["/aaa/user","/aaa/login",...];
                                                    target:"被代理地址",
                                                    changeOrigin:true,//域名跨域
                                                    secure:false, //https协议跨域
                                                    pathRewrite:{"/aaa":"/api"}//将地址中的aaa替换为/api
                                                ]


9.HMR:热更新插件【webpack自带的插件】【懵逼慎用，用dev-server她不香吗？】
        作用：热更新插件可以实时监听打包内容的变化，当内容发生变化时，
              及时打包文件，并更新网页，值得注意的是【它不会刷新网页】


        使用：在webpack.config.js中实例化插件 new Webpack.HotModuleReplacePlugin(),并配置devserver中的hot和hotOnly为true
        【注】：如果使用了MiniCssExtractPlugin插件，请在MiniCssExtractPlugin的配置中增加hrm:true【开启热更新】




10.webpack语法处理bable:
        作用:将高级语法转换为低级语法，便于兼容浏览器
        使用：去bable官网自己看 https://www.babeljs.cn/setup#installation




11.html-withimg-loader:
        作用：打包html中引用到的图片【css中用到的图片可以用file-loader或者url-loader】
        使用：


12.image-webpack-loader或者img-loader:
        作用：对打包的图片进行压缩
        使用：https://www.npmjs.com/package/image-webpack-loader


13.postcss-sprites/webpack-spritesmith:【个人感觉没什么卵用】
        作用：打包图片
        配置: 选项  https://juejin.im/post/6844903925473099784