webpack --devserver

在开发中，我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后，我们需要执行npm run build命令更新js文件，然后再刷新页面，才能看到更新效果。webpack-dev-server正好解决了这个问题，是一款便捷的本地开发工具。

module.exports = {
    devServer:{
        contentBase:resolve(__dirname,'build'), // 项目构建后路径
        watchContentBase:true,// 监视 contentBase 目录下所有文件 , 一旦文件变化就会 reload重载
        watchOptions:{// 监视文件(源代码)
            // 忽略文件(包)
            ignored:/node_modules/
        },
        compress:true, // 自动gzip压缩
        port:3000,// 端口号
        host:'localhost',// 域名
        open:true,// 自动打开浏览器
        hot:true,// 开启HMR功能
        clientLogLevel:'none', // 不要显示启动服务器日志信息
        quiet:true,// 除了一些基本启动信息以外, 其他内容都不要显示
        overla:false,// 如果出现错误, 不要全屏提示
        // (浏览器和服务器有跨域问题, 但是服务器和服务器之间没有跨域),代码是通过代理服务器运行,所以浏览器和代理服务器没有跨域问题
        proxy:{// 服务器代理, 解决开发环境跨域问题 
            '/api':{ // 一旦devServer(3000)服务器接收到 /api/xxx的请求, 就会把请求转发到另外一个服务器(5000)
                target:'http:localhost:5000',
                pathRewrite:{
                    '^/api':''// 发送请求时,请求路径重写; 将/api/xxx  ---->/xxx (去掉api)
                }
            }
        }
  }  
}

webpack-dev-server特点：

• 令Webpack进行模块打包，并处理打包结果的资源请求
• 作为普通的Web Server，处理静态资源文件请求
• 解决了来回npm run build,再更新代码的问题，比较便捷
• 可以设置port端口和open(自动打开页面)，其他更多配置可以参考官网api
• 自动刷新：浏览器自动更改后的内容