將配置添加到基於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... 
    } 
}