webpack服务器开发配置

为什么要搭建webpack服务器？
image.png

本地服务器server

搭建本地服务器常用上面的第二种方式即 webpack-dev-server

首先先安装 webpack-dev-server 

1
npm install webpack-dev-server -D

安装成功之后再package.json中加入 "serve":"webpack serve" ,用于执行 npm run serve 命令开启本地服务器

1
2
3
4
5
6
7
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "serve": "webpack serve",
  "ts-check": "tsc --noEmit",
  "ts-check-watch": "tsc --noEmit --watch"
},

开启服务器成功image.png
并且当再次在文件中修改代码的时候服务器会自动编译并刷新页面，展示最新编译之后的效果。这将会增加开发效率。
image.png

server的静态资源

如何引入使用静态资源？
image.png

server的其他配置

image.png
image.png

server的proxy代理(也可以是跨域问题的解决方案)

当webpack服务器和api接口的的服务器在使用时是资源产生了跨域可以借助proxy代理（node项目不存在跨域，因为它们本身相当于在一台服务器上进行所以不会存在跨域）进行解决。

  • 安装axios npm install axios
  • 在webpack.config.js中配置proxy代理相关代码：
1
2
3
4
5
6
7
8
9
10
11
12
devServer: {
  static: ["public"],
    proxy: {
    "/api": {
      //接口路径前面的公共部分，让其在接口调用的js文件中用api代替
      target: "http://localhost:9000",
        pathRewrite: {
        "^/api": "",
          },
    },
  },
},
  • 在使用接口的文件中更改接口路径的样式，例如将接口前面（包括端口号）的公共部分用api代替
1
2
3
4
5
6
7
import axios from "axios";

//发送网络请求：   安装axios：  npm install axios
axios.get("/api/users/list").then((res) => {
  console.log(res.data);
});

image.png

changeOrigin作用

image.png
当值为true时，host的端口号瑜api接口的一样
image.png
如果不写changeOrigin则host的值与webpack本地服务器的端口号一致

historyApiFallback

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
devServer: {
  static: ["public"],
  proxy: {
    "/api": {
      target: "http://localhost:9000",
      pathRewrite: {
        "^/api": "",
      },
      changeOrigin: true
    },
  },
  historyApiFallback: true,
},

经过上方配置后当请求一个不存在的页面（如localhost:8080/about对应的页面不存在），则不会报错会展示localhost:8080页面