Webpack verwenden vorhandene Quellkarte von vorherigen Build-Schritt

Question

Ich habe .ts Dateien kompiliert zu .js und .js.map Dateien von meinem Editor und bin die .js Dateien mit Webpack bündeln. (Ich will nicht webpack verantwortlich sein für die .ts kompilieren, weil dann nicht die Fehler richtig im Editor angezeigt.)

Wenn ich die kompilierten .js Dateien webpack füttern es nicht die bestehende .js.map abholen Dateien (über //# sourceMappingURL=... in jeder Datei), und so die bundle.js.map Punkte auf die .js Dateien, aber nicht auf die ursprünglichen .ts Dateien.

Wie bekomme ich Webpack, um auf den vorhandenen .js.map Dateien zu halten, so dass die resultierende bundle.js.map Punkte direkt zurück zu den ursprünglichen .ts Dateien?

Answer 1

Es stellt sich eine zusätzliche webpack "preloader" rief source-map-loader funktioniert der Trick:

$ npm install source-map-loader --save 

Dann in webpack.config.js:

module.exports = { 
    // ... 
    devtool: 'source-map', 
    module: { 
     preLoaders: [ 
      { 
       test: /\.js$/, 
       loader: 'source-map-loader' 
      } 
     ] 
    } 
}; 

Answer 2

Ich will nicht webpack für die Erstellung der .ts verantwortlich sein, weil dann die Fehler nicht richtig im Editor erscheinen

Sie würden auf Ihrem Editor abhängig. Z.B. atom-typescript hat eine Option, mit der Sie compileOnSavehttps://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md#compileonsave deaktivieren können, aber es zeigt Ihnen immer noch Fehler.

Dann können Sie auch konfigurieren webpack z. https://github.com/TypeStrong/ts-loader#options, um Ihnen auch Compilerfehler zu geben.

Wie kann ich webpack auf die vorhandenen .js.map Dateien zu halten, so dass die resultierenden bundle.js.map Punkte gleich wieder auf die ursprünglichen .ts Dateien

Der einfachste Weg ist, zu erhalten der Lader dies für Sie tun, was ts-loader tut