前端开发-开发配置篇

开门见山

本篇文章主要是，介绍webpack如何实现自动打包构建，以及自动编译

1、webpack-watch自动构建

1、通过webpack的监视api，watch工作模式通过监听文件变化，自动重新打包

具体用法也很简单 就是在运行的时候 加上 --watch,命令行：yarn webpack --watch 然后手动刷新浏览器即可

这种方式比较麻烦，如果浏览器在编译过后能够自动刷新会更好，具体该怎么实现呢 通过browser-sync这个插件

安装browser-sync：yarn add  browser-sync --dev

browser-sync  dist --files '**/*'  监听dist的文件目录变化 

这种构建方式有问题，主要是watch监视文件的变化写入到磁盘，二browser-sync 又从磁盘中读取文件 这样的磁盘读取了两次

降低了开发效率

webpack-dev -serve

这个webpack-dev -serve是webpack官方发布一个开发服务器，自动编译和自动刷新集成在一起了

具体使用，在项目的根目录下运行命令行，输入命令： yarn webpack-dev-server

需要是注意的是，这个不会生成dist目录，因为这个服务器把打包结果放到内存里面了，这样做的目的是提高打包效率

webpack-dev -serve静态资源访问

webpack-dev -serve只要是能打包的文件，都能够访问到，要是有一些静态资源需要webpack-dev -serve访问这样的话需要单独设置

具体在webpack配件文件中添加属性

   devServer: {
        contentBase: "./public", //可以是一个数组也可以是一个文件路径
        proxy: {
            "/api": {
                //原地址http://localhost:8080/api/users =>  目标地址https://api.github.com/api/users
                target: "https://api.github.com",
                //路径重写 原地址http://localhost:8080/api/users +>  目标地址https://api.github.com/users
                pathRewrite: {
                    "^/api": ""
                },
                //不能使用本地localhost:8080作为请求GitHub的主机名
                changeOrigin: true
            }
        }
    },
 这样就可以解决跨域问题了

谢谢观看，如有不足，敬请指教