✌️✌️✌️ 续篇 | 使用现成webpack模板 | 学习效率大大提升

本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！

前言

自从上次搭建了webpack-template之后，在此之后的学习中提高了不少效率！不用从零搭建webpack环境，省去了繁琐的配置。但你会发现我们的模板还有一些常用的插件/模块没有配置，接下来我们将增加我们的配置项。

如果您之前还没阅读过从零搭建webpack-template 建议请点击下方链接进行阅读后再阅读本文

👇 点击我跳转 👇

👆 点击我跳转 👆

调试环境

在实际开发中，我们不可能一直通过build指令将项目进行合并打包再打开查看，这样子会使得开发调试效率非常之慢。我们给我们提供了一个叫webpack-dev-server的插件，它可以给我们提供一个临时服务器，可以将我们项目打包后的文件放到这个服务器中供我们开发者进行浏览，调试。

安装`webpack-dev-server`插件

npm install --save-dev webpack-dev-server @types/webpack-dev-server

配置插件

引入插件，在配置类型方面，我们需要做出一些修改，原本我们的配置对象模块中用的是webpack包中的config类型，但现在我们需要用到另外一个模块（webpack-dev-server）要在配置对象中配置devServer属性，而webpack中的config中没有devServer这个类型的属性，我们定义一个Configuration接口作为配置文件的类型，让它继承下webpack包中的config，当它底下有devServer的时候则对应上WebpackDevServerConfiguration

// webpack.config.ts
// 这里忽略一些代码
import { Configuration as WebpackConfiguration } from 'webpack';
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';

interface Configuration extends WebpackConfiguration {
  devServer ?: WebpackDevServerConfiguration;
}
// 这里忽略一些代码

在config中，加入devServer属性更多配置请参考

const config: Configuration = {  
  // 这里忽略一些代码
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 8080,
  },
}

在package,json中的script属性中加入serve，这里的--open指的是当服务构建完成之后自动打开对应的URL

 "scripts": {
    "build": "webpack",
    "lint": "eslint --fix --ext .js,.ts src",
    "serve": "webpack serve --open",
    "prepare": "husky install"
  },

执行npm run serve后，webserver将开始运行构建一个服务环境，对应的URL地址也在terminal中显示出来，webserver也会自动的帮我们打开浏览器访问对应的URL地址。

现在，当我们在index.html中修改一些代码时，webpack-dev-server会监听到项目下代码的修改，立即将修改后的代码重新进行打包合并，更新后服务中，页面也会进行相对应的改变。

<!-- src/pages/index/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <h2>
        index.html
    </h2>
<h3>my juejin home page: https://juejin.cn/user/2858385965322935/posts</h3>
</body>
</html>

关于webpack-dev-server该插件还有很多的配置项，这里我们只是做了简单的配置，如果你想了解更多的配置，请移至插件配置文档

网络请求

在传统的页面中，更新页面的内容需要刷新整个页面，但在前端开发中，往往离不开网络数据的请求，我们需要调用后端写好的API进行数据请求，将数据内容渲染到页面中。这里我们使用axios这个第三方请求库。

安装`axios`

npm install axios

直接请求（不推荐）

最简单粗暴的方法，你可以直接通过axios对URL进行get post的请求，但不建议这样子操作，在日常开发我们会将请求回来的数据进行处理再交给对应的组件去处理渲染，如果你直接通过以下方式来请求，那么你的项目中每个请求可能会出现很多重复的代码，你也许会说将这些重复的代码进行一个封装处理，但这不是最好方法，axios给我们提供了拦截器功能，在请求发送前和请求响应后可以统一处理后再交给对应的页面处理，这样子可以大大降低代码的耦合度以及方便后续开发中对代码的维护，还可以对API集中管理 请继续往下看。

import axios from 'axios';

axios.get(url[, config]).then()
axios.post(url[, data[, config]])..then()

配置全局网络请求实例

在src文件夹下创建network文件夹，作为项目网络请求的管理文件夹，在其下面创建request.ts文件，配置项目全局axios实例。

// src/network/request.ts
// 引入axios以及一些类型
import axios, {
  AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosPromise,
} from 'axios';
import responseInterceptor from './Interceptors/responseInterceptor';

export default (config: AxiosRequestConfig):AxiosPromise => {
// 配置全局参数
  const cfg: AxiosRequestConfig = {
    baseURL: 'http://127.0.0.1:8000',
    timeout: 5000,
    headers: {
    },
  };

  const instance: AxiosInstance = axios.create(cfg);

  // 配置请求拦截器
  instance.interceptors.request.use((res: AxiosRequestConfig) => res);

  // 配置响应拦截器
  // eslint-disable-next-line max-len
  instance.interceptors.response.use((res: AxiosResponse) => Promise.resolve(responseInterceptor(res)));

  return instance(config);
};

在src/network/Interceptors文件夹中创建responseInterceptor.ts文件，配置axios实例的响应拦截器，处理从服务器端中请求回来的数据。

// src/network/Interceptors/responseInterceptor.ts
import { AxiosResponse } from 'axios';

export default (response: AxiosResponse) => {
  const { status } = response;
  const { errCode } = response.data;
  // 如果http响应状态码response.status正常，则直接返回数据
  if (status === 200 && errCode === 0) {
    return response.data;
  }
  //    当请求状态码和后端返回的errCode异常
  //    其他处理操作
  return errCode;
};

API集中管理

在项目中，我们常常会使用到很多的API地址，我们需要将这些集中起来管理，按页面来分类之后将每一个API封装成对应的一个API请求函数，之后我们在对应的页面调用就可以直接拿到数据处理了，后面如果API地址有更改我们也可以从对应页面中的文件进行修改，这给我们开发带了很大的好处！

在network文件夹中创建一个api文件夹，里边我定义了一个home.ts文件，作为home页面中的API管理文件。（这个文件放的是home页面中所用到的API函数）

// src/network/api/home.ts
import request from '../request';

export const getHomeTopNav = () => request({
  url: '/get_home_top_nav',
  method: 'get',
});

export const homePageArticle = () => request({
  url: '/home_page_article',
  method: 'get',
});

使用API函数

在页面中，我们引入封装好的API函数，使用async await将函数再包装一层，请求回来的数据将在这个函数中进行二次处理，例如将数据进行一个大小写转换，长度分割等操作。

import { getHomeTopNav, homePageArticle } from '../../network/api/home';

const getDataHomeTopNav = async () => {
  const res = await getHomeTopNav();
  // 忽略一些代码
};
const getDataHomePageArticle = async () => {
  const res = await homePageArticle();
  // 忽略一些代码
};

getDataHomeTopNav();
getDataHomePageArticle();

最后

这篇文章是针对原本我们封装的webpack-template进行调试环境和网络请求管理的配置，在日常开发页面过程中配置开发调试环境是必不可少的，这会使我们的开发体验变得更轻松一些。而网络请求的封装，主要目的是帮助我们简化代码和方便后期的更新维护。