webpack动态修改接口地址：generate-asset-plugin与window全局变量方案

前言

通常情况下，webpack构建过程中的环境变量文件依赖打包命令来定位并获取对应的接口地址。这意味着接口地址仅在每次打包时被固化到代码中，发布后无法直接修改。本文旨在解决这一限制，实现一次打包后，通过修改外部接口地址文件并刷新页面，即可动态更新接口地址的目标。

实现该需求主要有两种技术路径：一是引入generate-asset-webpack-plugin插件生成外部配置文件；二是将接口配置暴露为window对象的全局变量，供运行时读取。

方法（一）安装generate-asset-webpack-plugin插件

首先，需要通过npm安装该插件。

npm install generate-asset-webpack-plugin -S -D

接着，在项目的build文件夹下新建generate-asset.config.js文件，用于定义插件行为。

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const config = require('../config/app.config');

function createServerConfig(compilation) {
    return JSON.stringify(
        Object.assign({
            _hash: compilation.hash,
        },config)
    )
}
//生成app-config.json文件
module.exports = () => {
    return new GenerateAssetPlugin({
        filename: 'config/app-config.json',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        }
    })
}

在config文件夹下创建app.config.js，用于存放具体的接口配置信息。

module.exports = {
  env: 'prod',
  baseUrl: "http://xxx.com"
}

该配置文件在开发环境中可直接引入使用。在正式环境构建时，需要在webpack.base.conf.js中进行额外配置。首先引入相关模块：

const packageConfig = require('../package.json')
const generateAssetAppConfig = require('./generate-asset.config')

随后，在plugins配置项中添加该插件的实例化代码：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  plugins: [
    generateAssetAppConfig(packageConfig)
  ],

在axios请求封装文件中，我们抽离出一个https.js配置文件。开发环境下直接读取本地变量，而正式环境则通过异步请求获取生成的app-config.json文件中的配置。

import * as g from '../config/app.config'
import $ from 'jquery'

if (process.env.NODE_ENV === 'production') {//打包正式环境使用app-config.json
    $.ajax({
        url: 'config/app-config.json',
        async: false,
        type: 'get',
        dataType: "json",
        success: function (rs) {
            if (rs.baseUrl) {
                axios.defaults.baseURL = rs.baseUrl;
            }
        }
    });
} else {//开发环境就直接使用app.config.js
    axios.defaults.baseURL = g.baseUrl;   //配置接口地址
}

总结来说，执行npm run dev时，系统直接读取本机config/app.config.js文件；而执行npm run build打包后，服务器上的dist/config/app-config文件将被用于获取配置。

方法（二）暴露在window成为全局变量

在config目录下创建app.config.js文件，定义基础URL等配置信息。

let baseURL = "http://xxx.com";

window.httpConfig = {
  baseURL,
};

打包正式环境时，利用CopyWebpackPlugin将app.config.js拷贝到static目录下。修改build/webpack.prod.conf.js以包含此插件配置：

	new CopyWebpackPlugin([
      {
        from: "./config/app.config.js",
        to: 'static',
      },
    ]),

随后，在index.html中引入该脚本文件。

 <script src="/static/app.config.js"></script>

在axios的配置文件中，根据环境判断获取接口地址的方式：

import * as g from '../config/app.config'

// 如果是正式环境打包，去配置文件获取，如果是开发环境，去获取本机的app.config文件
axios.defaults.baseURL =
  process.env.NODE_ENV === "production"
    ? window.httpConfig.baseURL
    : g.baseURL;

至此，关于webpack配置文件外置的两种实现方式介绍完毕。更多相关webpack配置文件外置内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

webpack配置文件外置的两种实现方式

前言

方法（一） 安装generate-asset-webpack-plugin插件

方法（二） 暴露在window成为全局变量

实用工具推荐

方法（一）安装generate-asset-webpack-plugin插件

方法（二）暴露在window成为全局变量