webpackDevServer提升你的开发效率

webpack.jpg

写在前面

提起devServer相信大多数开发过vue或react的小伙伴已经不再陌生了，当然为了照顾新了解的同学，这里还需要介绍一下，对于现在我们的代码，我们应该能感受到这样的情况，每次我们修改代码，想要看到最新的内容，都得手动执行打包命令，再去手动刷新浏览器，这样也是降低了我们的开发效率，于是devServer为我们提供了便利，他能让我们在开发的过程中，不刷新浏览器就能看到最新的代码结果。当然了除了devServer还有其他的方式，这里我们一一介绍

watch

我们现在每次执行npm run bundle来打包实际上是在执行package.json文件中的webpack指令，这时候，我们通过修改改指令来达到监听文件变化而自动打包的目的

"watch": "webpack --watch"

现在我们修改js代码，看是不是又自动打包了呢，这时候刷新页面也可以看到最新效果了。这里主要先禁用CleanWebpackPlugin插件
这里我们实现了自动监听文件打包，但是，却还是要手动去刷新浏览器。要想实现想在服务器上一样，自动刷新，自动帮我们打开浏览器等一系列酷炫特性，这时候就需要我们引入devServer了

devServer

首先需要安装

npm install webpack-dev-server -D

增加webpack配置如下:

devServer: {
  contentBase: './dist' // 其中contentBase代表我们的服务是要其在那个路径下
},

然后再package.json中加一个指令

"start": "webpack-dev-server"

这时候我们运行npm start，你会发现命令行日中中帮我们起了一个端口:8080的服务，这就是我们的devServer，我们试着改一下代码，这时候发现，我们不用手动刷新浏览器，就可以看到最新的代码结果了。
下面我们再对devServer配置做修改

devServer: {
    contentBase: './dist',
    open: true, // open代表当我们服务起来时，自动打开浏览器窗口打开对应端口
},

加了open配置后这时候运行再看看效果吧

为什么我们要起一个服务呢？

这里提出这个疑问，因为我们在项目的开发中一般不是简单的静态页面，都会涉及到ajax请求，但是ajax请求都是需要在http协议下进行的，不是我们的静态文件，这时候就需要我们必须要起一个服务了，想必大家很久以前学习ajax的时候，一定也是其了一个tomcat吧~

proxy

看到proxy想必大家不会陌生，做过react或者vue的同学，一定对他很熟悉，我们用他来做一个跨域的模拟，实际上这些脚手架工具可以支持这种写法，就是因为webpack的devServer中的proxy,而它本身也是支持这种跨域的代理的。这里先简单做个介绍，后面我们再使用

其他api

看webpack文档，在devServer配置项中，数量相当多，这里不做一一介绍，假如以后有遇到devServer的需求，去查文档查资料就可以了，后面我们做demo遇到了，也会去讲解一些。