webpack nicht erzeugen von source maps
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
plugins: [
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
hot: true,
contentBase: path.join(__dirname, 'dist'),
},
devtool: "source-map"
}
Paket.json
"scripts": {
"build": "webpack --progress --colors",
"dev": "webpack-dev-server -d --watch --progress --colors"
},
index.js
let h = "hello world"
console.log(h)
Mir laufen beide npm build
und npm run dev
aber weder scheint zu generieren, Quelle maps. Der Weg ich bin die Kontrolle, wenn Sie zeigen, bis, ist, wenn ich sehen kann, die original-Quelle in den Chrome dev tools oder Safari-dev-tools.
Vielen Dank für jede Hilfe!!!
Update 0
-
Läuft
npm run build
(npm build
nichts tut), hat in der Tat generierenbundle.js.map
und ich kann die source-Karten erfolgreich in Google Chrome (yay!) -
Läuft
npm run dev
scheint zu kompilieren fein und dient meiner Webseite erfolgreich aber diedist
Verzeichnis nicht enthaltenbundle.js
oderbundle.js.map
- aber wenn ich zulocalhost:8080
es funktioniert immer noch (ohne source maps).
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte vor kurzem dieses problem mit webpack 3.6.0. Keine Quelle map-Dateien werden generiert, obwohl ich noch
devtool: 'source-map'
im webpack.config.js.In meinem Fall, das problem war, dass ich vorbei
-d
zu webpack auf der Kommandozeile, das ist eine Abkürzung für alle diese (beachten Sie die zweite option und argument):Statt der übergabe
-d
ich nun--debug --output-pathinfo
- und source-map-Dateien generiert, wie erwartet.Können Sie sehen, dass die tatsächlichen
.map
Dateien in Ihremdist
Ordner? Versuchen Sie, die SourceMapDevToolPlugin zu Ihremwebpack.config.js
Datei.Starten Sie den build-Prozess und überprüfen Sie in der
dist
Ordner für.map
- Dateien.webpack
es erzeugtbundle.js.map
. In Chrome dev tools, wenn ich nach Quellen und klicken Sie aufbundle.js
es heißt "Quelle Karte erkannt" aber ich bin nicht sicher, wo zu meiner ursprünglichen Quelle. Auch dies scheint nicht zu arbeiten, wenn ich lief diewebpack-dev-server
. Irgendwelche Tipps würde sehr geschätzt!webpack
(ohne das plugin) und Einstellungdevtool: "source-map"
hat auch das gleiche Ergebnis.web pack://
. Wenn Sie den Mauszeiger über app.js Datei in Ihremsrc
Ordner, ein label sollte sagenapp.js(from source map)
. Ist dies der Fall für Sie?webpack
aber nicht wenn ichwebpack-dev-server
sah Sie Ihre Frage in der webpack-chat. 🙂
ändern
devtool
zusource-map
und dann haben Sie die source-Karten. In Chrom sehen Sie die original-Quelle (debugging es funktioniert auch).Edit: Auch in Skripte im Paket.json, die Sie nicht brauchen, um ref zu den node_modules-Ordner. nur der Befehl npm Aussehen wird automatische in den node_modules/.bin-Ordner.
devtool: "source-map"
aber es funktioniert immer noch nicht. In Chrom, unterwebpack://
ich sehe(webpack)
,(webpack)-dev-server
, und(./~)
aber keine.
.npm build
nicht alles tun, abernpm run build
generiertbundle.js.map
- Dateien. Und ich kann auch sehen, wie Sie in Chrome, vielen Dank! Also ich denke, ich habe ein paar mehr Fragen - hat der.map
Datei müssen generiert werden, oder gibt es inline-source-Karten? Warum nichtcheap-eval-source-map
Arbeit? Warum geht es nicht bei der Verwendung vonwebpack-dev-server
?