【前端】webpack5使用webpack-dev-server实现热更新和代理

一、前言

在我前面的博客中，已经介绍了webpack的基本配置和使用：【前端】webpack5的配置及基本使用。
以及webpack5中常用的loader和plugin：【前端】webpack5常用loader和plugin。

今天我们来看一下webpack-dev-server，它是什么呢？

大家有没有发现，在前面两篇博客的例子中，我们每次修改完js文件后，都需要再次打包，然后再用浏览器打开生成的html文件。但是我们在使用vue-cli开发项目时，一修改文件，就会立刻重新编译，然后页面自动发生变化，webpack-dev-server就是完成这一功能的。

webpack-dev-server就是一个小型的静态文件服务器。使用它，可以为webpack打包生成的资源文件提供Web服务。

webpac-dev-server支持Hot Module Replacement，即模块热替换，在前端代码变动的时候无需整个刷新页面，只把变化的部分替换掉。浏览器通过 websocket 和 webpack-dev-server 进行通信。

二、配置webpack-dev-server

项目安装webpack-dev-server

npm install -D webpack-dev-server

在webpack中配置webpack-dev-server

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 通过 npm 安装

module.exports = {
    
    
  entry: "./src/index.js",
  mode: "development",
  output: {
    
    
    filename: "index.js",
  },
  plugins: [new HtmlWebpackPlugin({
    
     template: "./src/index.html", scriptLoading: "blocking" })],
  devServer: {
    
    
    static: {
    
    
      directory: path.join(__dirname, "dist"),
    },
    open: true,
    port: 9000,
  },
};

在之前项目的基础上新增的配置，已经配置好了html-webpack-plugin了。
其中devServer用于配置webpack-dev-server：

static.directory : 告诉服务器从哪里提供内容。

open: 是否自动打开浏览器（默认为false）。

port: 服务端口，这里设置的9000，那么需要访问loaclhost:9000来访问打包好的页面。

我们启动服务器

扫描二维码关注公众号，回复： 15063153 查看本文章

npx webpack serve

此时自动打开了浏览器：

我们试着修改index.js，看看是否会自动更新

浏览器端自动更新了

更多配置详情：https://webpack.docschina.org/configuration/dev-server/

三、webpack-dev-server请求代理

还记得vue项目中可以配置vue.config.js实现跨域代理吗？
Vue项目实现跨域请求（无config文件夹）。

这其实就是使用了webpack-dev-server的代理设置，我们在webpack项目中同样可以设置webpack.config.js来配置代理：

module.exports = {
    
    
  //...
  devServer: {
    
    
    proxy: {
    
    
      '/api': {
    
    
        target: 'http://localhost:3000',
        pathRewrite: {
    
     '^/api': '' },
      },
    },
  },
};

现在，对 /api/users 的请求会将请求代理到 http://localhost:3000/users。

并且不会出现跨域的问题，这是为什么呢？

我们知道，webpack-dev-server起了一个本地服务器，将打包好的项目提供给浏览器，当设置的代理以后，它便会进行代理请求，服务器之间是不存在跨域的，所以可以直接请求到资源。