Wie sage ich Webpack, keine Konfigurationsdatei zu packen

Question

Ich verwende Webpack für ein Angular 4/TypeScript Projekt und in einem meiner Module möchte ich auf eine config.json Datei mit einigen Werten zugreifen, die auf dem Server konfigurierbar sein müssen , Konfigurationswerte, die zur Laufzeit geändert werden können, anstatt zur Kompilierzeit festgelegt zu werden).

In meiner Quelle verweise ich auf diese Datei

mit

let config = require('./../relative/path/config.json'); 

Es funktioniert gut, aber webpack packt es und in der dist die Werte der Konfigurationsdatei resultierenden zusammen mit dem Rest in der app.XXX.js Datei am Ende .

Ich habe versucht, die Datei in webpack.common.js (die von den anderen Webpack-Konfigurationsdateien verwiesen wird) zu markieren, indem Sie es zu externals hinzufügen, aber das ändert nichts. Ich hatte gehofft, dass Webpack dann die Datei einfach nicht zusammenpacken würde, sondern es in dem Verzeichnis dist bereitstellen würde, wie es ist.

Frage: kann ich meine config.json haben, und haben webpack es nicht packen, sondern einfach zu implementieren, so dass ich die Datei beim Entfalten statt für die Werte Öffnung app.XXX.js und die Suche ändern oder ersetzen?

Answer 1

Als erstes ist zu beachten, dass Ihre webpacked Anwendung nicht auf dem Server läuft, sondern im Browser des Clients. Obwohl dieser Aufruf wie ein Aufruf zum Lesen einer Datei zur Laufzeit aussieht, ist es in Wirklichkeit nur eine Anweisung an Webpack, eine Datei zu bündeln und sie an den im Bundle eingebetteten Browser bereitzustellen. Das Paket selbst wird als einfache Datei für den Browser bereitgestellt.

In Anbetracht dieses einfache Aufgabe eine Konfigurationsdatei zur Laufzeit liest wird: eine Datei vom Server holen und sie zur Laufzeit Parsen. Glücklicherweise hat webpack genau dafür eine Infrastruktur: import().

import('./../relative/path/config.json').then(config => { 
    // Do something with 'config' 
}) 

oder wenn Sie noch auf Legacy JavaScript sind, können Sie Legacy require.ensure() verwenden.

require.ensure(['./../relative/path/config.json'], function(require) { 
    let config = require('./../relative/path/config.json'); 
    // Do something special... 
});