一、前言

在我前面的博客中,已经介绍了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来访问打包好的页面。

我们启动服务器

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起了一个本地服务器,将打包好的项目提供给浏览器,当设置的代理以后,它便会进行代理请求,服务器之间是不存在跨域的,所以可以直接请求到资源。

Logo

前往低代码交流专区

更多推荐