webpack-dev-server提升开发效率

经常会遇到这种情况，当我们修改了代码之后，都需要手动去运行打包命令，然后再手动的打开dist目录下的index.html文件，每次都要经过这几个步骤，才能实现代码的重新编译和运行。这样的开发效率是非常低下的。
我们想要实现这样一种功能，如果修改了src目录下的源代码，那么dist目录自动的重新打包，这样我再去页面上看效果就简单多了，就不需要每次都手动去运行一次打包命令了

要实现这样的功能，有三种做法

方法1（缺点，没法做AJAX方面的调试，也不会自动帮我们刷新浏览器和打开浏览器） ：

• 当我们运行 npm run bundle的时候，实际上是在运行 webpack命令，我们可以再新建一个命令叫watch，然后运行 npm run watch的时候，实际上让它运行 webpack --watch命令
• 当在webpack后边加了一个 --watch的时候，它的意思是，webpack会帮我们去监听它打包的文件，只要它打包的文件发生了变化，它就会自动的重新打包
  
  

  image.png
• 这样，当我们配置好以后，只需要运行一次 npm run watch就可以了，后边我们修改了源文件，webpack会自动完成打包，我们只需要去刷新浏览器就可以看到相关的变化。
• 这种方式并不够好，因为我们还是需要手动的去刷新浏览器页面，才可以看到变化。

方法2（最推荐的方式）：

注意通过webpack-dev-server打包生成的文件，并不会放在dist目录下（也就是没有dist文件夹），而是放到电脑中的内存里面，这样可以有效提升打包的速度，让我们的开发效率更高

我希望的效果是，假如我第一次运行 npm run watch的时候，自动帮我打包，同时自动帮我打开浏览器，同时还可以去模拟一些服务器上的特性，要达到这种效果，通过 webpack --watch是不行的，而是要借助 webpack-dev-server

• 我们需要在webpack的配置里，加一个 devServer的配置
  

  

  image.png

• 这个配置的意思是，我这个服务器要启在哪个文件夹下，因为打包生成的文件都是在dist文件夹下，所以我们设置contentBase是./dist,也就是借助 webpack-dev-server帮我们自动了一个服务器，而这个服务器的根路径就是当前目录下的 dist目录下

• 为了区别刚才的命令，我配置一个新命令

  
  
  

  image.png

• 安装webpack-dev-server

• 然后运行npm run start ，之后可以看到， webpack-dev-server帮我们启了一个服务器，在localhost:8080端口上,然后我们就可以直接去访问这个服务器地址
  

  

  image.png

• 这个时候我们去看页面，也是能正常运行，比如我可以在JS文件里打印hello,如果这个时候，我修改了JS文件，要它打印出 hello world， webpack-dev-server不但可以监控到文件的变化，并且重新启动 webpack-dev-server去打包文件，同时它自动的帮我们刷新浏览器，所以用它可以更大的提升我们打代码开发效率

• 但是还有一点，浏览器还是我手动打开的，我想的是，运行打包命令后，自动打开浏览器，自动访问启动的服务器地址。这个时候，只需要对devServer加一个配置。有了这个配置，当我们运行npm run start的时候， webpack-dev-server会启动，启动的时候，open会自动的帮我们打开一个浏览器，并自动的访问启动的服务器地址。
  

  

  image.png

为什么我们要开这样一个服务器呢？
写过Vue或者React的都知道，有时候我们要在前端写AJAX请求，如果我们是直接通过file协议打开dist目录下的index.html，这个时候发AJAX请求是不行的，因为file协议主要用于访问本地计算机中的文件，而我们要发请求，就要通过http超文本传输协议，这就是为什么我们要通过 webpack-dev-server来帮我们开启一个http服务器的原因，服务器开启后，我们再在index.js中去发AJAX请求就没有问题了

• 我们刚才配置的命令中，npm run bundle命令是调用的webpack生成的打包文件，需要我们手动的去打开index.html文件，这个时候打开后是file协议，这肯定是不能满足我们平时的开发需求的，而npm run start命令则是调用webpack-dev-server它会帮我们开启一个web服务器，这个时候，我们再去发送AJAX请求就没有问题了，这个时候我们的代码是在localhost:8080（实际上就是http://localhost:8080）上访问的。所以，一般我们使用vue脚手架工具或react脚手架工具，它都会帮我们开启一个服务器，这个服务器大多数情况下，都是通过webpack-dev-server开启的
• 不管是写vue还是react,里边都会有一个proxy的配置，它是帮我们去做跨域的接口模拟的时候要使用的一个接口代理。那为什么vue和react可以使用这个接口代理呢？是因为vue和react脚手架的底层都使用了webpack-dev-server,我们打开webpack官网，找到documentation下的configuration下的 devServer就可以看到相关的配置解释，所以我们可以像下边这么配置，也就是如果用户访问 localhost:8080下的/api的时候，它会直接帮我们转发到localhost:3000这个地址
  
  

  image.png
  
  
  

  image.png
• webpack-dev-server还有很多其他的配置，比如port，当webpack-dev-server帮我们启动服务器的时候，默认是8080端口，而我们可以通过port修改端口号
  
  

  image.png
  
  
  

  image.png

方法3

自己写一个简单的webpack-dev-server

1. 加一个新的命令server,当我运行npm run server的时候，自己写一个服务器，这个服务器会监听src目录下的内容的变化，它会像webpack-dev-server一样，自动帮我们重启服务器，更新网页上的内容。
   

   

   image.png

2. 新建一个server.js跟package.json文件同级,在server.js里写服务器的相关代码
   

   

   image.png

3. 如果想建一个server服务器的话，我们又是在node的环境下，我们需要安装Koa或者Express（基于node的Web 应用程序开发框架）帮我们快速搭建一个HTTP服务器

这个服务器需要帮我们监听文件的变化，然后还要帮我们自动的重新打包，所以，还需要借助一个`webpack的开发中间件`叫做`webpack-dev-middleware`
npm install express webpack-dev-middleware -D

4. 安装完以后，我们要对webpack.config.js做一个修改
   
   

   image.png

5. 完成以上步骤，我们可以先试一下运行命令是否可以启动一个服务器（明显是可以的）

   
   
   

   image.png

6. 既然可以启动服务器，我们就来开始写服务器的内容

   
   
   

   image.png
7. 然后当我们运行npm run server后，打开localhost:3000就可以看到输出的内容了，如果我们改变src下index.js的内容，它会重新帮我们打包，当然我们写这个server没有这么智能，它不能自动帮我们刷新浏览器页面，也不能自动帮我们打开浏览器。
   8.output下的public可以不写，如果不写，那么server下的中间件的第二个参数也不要写，空对象即可；这种写法更简单
   
   

   image.png
   
   
   

   image.png

webpack的两种使用方式

• 命令行使用webpack

• 在node.js文件里，通过webpack()方法，直接调用webpack

  
  
  

  image.png