首页 > 解决方案 > Webpack Externals ,在运行时加载本地文件

问题描述

我有一个文件uiConfig.json,它有一些server URL,DevOps 团队根据环境更改文件。` 我正在尝试使用 webpack 在运行时加载此文件。

到目前为止,我已经尝试了以下方法。

  1. 使用 Webpack 外部组件
//webpack.config.js
  
externals: {
   'uiConfig': JSON.stringify(require('./uiConfig.json'))
},

将 uiConfig 复制到构建目录的根路径

//app.js

import uiConfig from 'uiConfig'
  1. 从脚本标签中获取 uiConfig 并将 url 公开给全局窗口对象。这种方法有时似乎有效,但不一致
<script type="application/javascript"> 
        window.uiConfig = {}
          fetch('./uiConfig.json').then((response) => {
            return response.json();
          }).then((data) => {
            window.uiConfig = data
        })
    </script> 

我做错了什么,我该如何解决这个问题?

感谢你的帮助。

标签: javascriptwebpackruntimeexternalwebpack-4

解决方案


推荐阅读