开发服务器

在开发阶段，目前遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：

编写代码
控制台运行命令完成打包
打开页面查看效果
继续编写代码，回到步骤 2

并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境

为了解决这些问题，webpack 官方制作了一个单独的库：webpack-dev-server

它既不是 plugin 也不是 loader

先来看看它怎么用

安装

安装

pnpm i webpack-dev-server -D

执行webpack-dev-server命令

npx webpack-dev-server

webpack-dev-server命令几乎支持所有的 webpack 命令参数，如--config、-env等等，你可以把它当作 webpack 命令使用

这个命令是专门为开发阶段服务的，真正部署的时候还是得使用 webpack 命令

当我们执行webpack-dev-server命令后，它做了以下操作：

内部执行 webpack 命令，传递命令参数
开启 watch
注册 hooks：类似于 plugin，webpack-dev-server 会向 webpack 中注册一些钩子函数，主要功能如下：
1. 将资源列表（aseets）保存起来
2. 禁止 webpack 输出文件
用 express 开启一个服务器，监听某个端口，当请求到达后，根据请求的路径，给予相应的资源内容

我们通常会在 package.json 中配置脚本命令

json

scripts:{
    "dev": "webpack-dev-server",
    "build": "webpack --mode=production"
}

配置

针对 webpack-dev-server 的配置，参考：https://www.webpackjs.com/configuration/dev-server/

常见配置有：

port：配置监听端口
proxy：配置代理，常用于跨域访问
stats：配置控制台输出内容

最佳实践

webpack.config.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  devServer: {
    open: true, //启动的时候自动打开浏览器
    port: 8000, //指定端口
    proxy: {
      //代理规则
      "/api": {
        target: "http://open.duyiedu.com", //代理的源
        changeOrigin: true, //更改请求头中的host和origin,因为有的服务器会读取header的host
        ppathRewrite: { "^/api": "" }, //如果不想携带/api，可以重写为""
      },
    },
  },
  entry: {
    index: "./src/index.js",
  },
  output: {
    filename: "[name]-[chunkhash:5].js",
  },
  //
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ template: "./src/public/index.html" }),
    new CopyPlugin([{ from: "./src/public", to: "./" }]),
  ],
};

重点解释一下 proxy:

一般开发完毕之后，会将前端的代码部署在和服务器同一个域名之上,比如http:duyi.com。

但是在开发阶段，我们和服务器分离，这样浏览器访问不同的域名就会跨域。

我们需要让 webpack-dev-server 来替我们代理，由它的服务器来进行转发请求，因为服务器与服务器之间通信是没有跨域的。

而代理的规则就是,当在开发服务器下代理了http:duyi.com，我们请求接口的时候，服务器识别到代理的/api规则之后，就会将localhost:8000/api/students/findAll前面的地址替换为http:duyi.com/api/students/findAll。

同时我们还可以将/api重写为空，使用的是pathRewrite配置项。

开发服务器 ​

安装 ​

配置 ​

最佳实践 ​

开发服务器

安装

配置

最佳实践