webpack优化系列一：webpack不同环境打包配置

原创

已于 2022-09-23 09:41:09 修改 · 5.1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #前端

于 2022-01-10 10:34:11 首次发布

本文介绍如何通过配置不同的.env文件来区分Webpack的开发、测试和生产环境，实现请求后端服务器等配置的灵活切换，并展示了如何在移动端项目中进行请求配置。

前言

webpack的env一般分为develop、test以及production，每个环境可能所需配置都不一样，比如请求的后端服务器等等
若每次打包单独修改，那可能太过繁琐，最重要可能打包时忘记，造成不必要的损失
故而，建议将webpack区分不同环境单独配置好，打包时使用不同命令即可

webpack其他相关给、推荐
一：webpack优化相关
1：webpack优化系列一：webpack不同环境打包配置
2：webpack优化系列二：Vue配置compression-webpack-plugin实现Gzip压缩
3：webpack优化系列三：vue子目录路径更改—publicPath
4：webpack优化系列四：vue打包后生成的chunk-vendors文件过大,利用SplitChunks插件，分离chunk

一：环境配置

新建.env.dev文件

NODE_ENV = 'dev'
VUE_APP_BASE_UPL='开发环境api'
// 其他所需配置都可在此定义

新建.env.test文件

NODE_ENV = 'test'
VUE_APP_BASE_UPL='测试环境api'
// 其他所需配置都可在此定义

新建.env.prod文件

NODE_ENV = 'prod'
VUE_APP_BASE_UPL='生产环境api'
// 其他所需配置都可在此定义

二：请求配置

新建request.js文件

// 此为移动端配置，引用了vant组件，如要换成其他组件请修改配置
// import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import {
   
    isEmpty, isFormData, filterObj } from '@/utils/function.js'
import {
   
    Toast, Dialog } from 'vant'

let pending = [] // 声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let CancelToken = axios.CancelToken

const TIMEOUT = 3000
const baseURL = process.env.VUE_APP_BASE_UPL

const getErrorString = (errorObj, defaultStr = '') => {
   
   
    let errStr = defaultStr
    // 对象
    if (typeof errorObj === 'object') {
   
   
        if (errorObj.response && errorObj.response.status) {
   
   
            errStr = `${
     
     errorObj.response.status}-${
     
     errorObj.response.statusText}`
        } else if (errorObj.message && typeof errorObj.message === 'string') {
   
   
            errStr = `${
     
     errorObj.message} 无返回或非正常操作`
        }
    } else if (typeof errorObj === 'string') {
   
   
        errStr = errorObj
    }
    return errStr
}

const removePending = ever => {
   
   
    for (const p in pending) {
   
   
        if (pending[p].u === ever.url + '&' + ever.method) {
   
   
            // 当当前请求在数组中存在时执行函数体
            pending[p].f() // 执行取消操作
            pending.splice(p