将配置添加到基于Webpack的SPA

Question

我正在使用Vue.js和Webpack 2编写SPA。对于我来说，Node生态系统是相当新的体验。

我需要能够设置一些配置变量，最好动态解析。在我看来，解决方案将涉及每当应用程序加载时获取的配置文件。这个问题看起来相当普遍，但我没有设法谷歌任何喜欢它。

Webpack世界中是否有任何“标准”解决方案，或者至少是任何既定的良好实践？

Answer 1

假设您将配置变量存储在JSON文件config.json中。

{ 
    "some": "123", 
    "configs": "456", 
    "here": "789" 
} 

要求您的配置文件与文件加载器在您的应用程序。 https://github.com/webpack-contrib/file-loader

// Require config file 
// File-loader returns the public URL for your file required here 
var configURL = require("file-loader!./config.json"); 

加载一个简单的XHR您config.json你初始化Vue的应用程序之前。

// Create XHR 
var configXHR = new XMLHttpRequest(); 
configXHR.open("GET", configURL, false); // Synchronous request 
configXHR.send(); 

// Response status check 
if(configXHR.status == 200) { 
    var configs = JSON.parse(configXHR.responseText); 
    console.log(configs); 
} else { 
    throw "Unable to load config file"; 
} 

// Bootstrap your Vue application below 
// ... 

Answer 2

优选动态解析

一个简单的解决可能依赖于HMR，其允许负载和动态更新导入的资源。此外，Webpack + HMR将自动监视服务器上的文件，并在客户端发布更新。

流派经典 - https://webpack.js.org/concepts/hot-module-replacement/

import config from 'APP_CONFIG'; 
// Some code ... 
if(module.hot) { 
    module.hot.accept('APP_CONFIG',() => { 
    // Reaction to changes... 
    } 
}