记一次webpack配置文件外置

最新推荐文章于 2025-06-01 19:06:42 发布

yazhiShaw

最新推荐文章于 2025-06-01 19:06:42 发布

阅读量705

点赞数 11

文章标签： webpack 前端 node.js

本文链接：https://blog.youkuaiyun.com/weixin_39357177/article/details/134952163

版权

前言

众所周知，webpack配置环境变量文件，是根据打包命令寻找对应的环境变量文件，从而获取接口地址。所以触发时机是在每次打包的时候，接口地址才会被打包进去，无法自由修改。
本次要求一次打包后，修改接口地址的文件，刷新页面可达到更新接口地址。

有两种方法，一是安装generate-asset-webpack-plugin插件，二是把接口地址暴露在window成为全局变量

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

首先安装插件

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 = () => {