Webpack AngularJS Quellmaps Ausgabe

Question

Ich habe schon lange Probleme damit, meine Quellkarten in meiner App zu verwenden. Ich habe in der Webpack-Konfiguration

devtool: 'source-map', 

gesetzt, aber sie sind immer noch nicht in den Chrome Devtools verfügbar.

Ich schob eine wirklich einfache Anwendung meines FE Stapel der Hoffnung, jemand mit dem Problem identifizieren konnte, ob es mit webpack ist, eckig, oder eine andere Bibliothek. https://github.com/coreysnyder/Angular-Webpack3-Seed

Hier sind die Versionen Ich renne:

{ 
    CoreyApp: '1.0.0', 
    npm: '4.4.4', 
    ares: '1.10.1-DEV', 
    http_parser: '2.7.0', 
    icu: '57.1', 
    modules: '48', 
    node: '6.9.0', 
    openssl: '1.0.2j', 
    uv: '1.9.1', 
    v8: '5.1.281.84', 
    zlib: '1.2.8' 
} 
OSX 10.12.6 

Answer 1

ich Ihre Quelle Karten für JS-Dateien beheben könnte, indem die babel-loader hinzufügen. Um dies zu tun, müssen Sie babel-Loader installieren:

npm i -D babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env 

und dann erweitern Regel für Js

rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: [ 
      { 
      loader: 'ng-annotate-loader', 
      options: { add: true, single_quotes: true } 
      }, 
      { 
      loader: 'babel-loader', 
      options: { 
       presets: ['@babel/preset-env'] 
      } 
      } 
     ] 
     }, [...] 
] 

bereit, weitere Details zu babel-loader github repo

Answer 2

Sie werden wahrscheinlich die Einrichtung Quelle haben Karte für verschiedene Lader individuell.

Für 'ng-annotate-loader' (Docs)

use: [{ 
    loader: 'ng-annotate-loader', 
    options: { 
     add: true, 
     single_quotes: true , 
     map: { inline: true, inFile: 'app.js', sourceRoot: __dirname + '/app' }} 
}] 

Für less können Sie documentation Option wie @ahmedelgabri verwenden

vorgeschlagen

use: [{ 
    loader: "style-loader" 
}, { 
    loader: "css-loader", options: { 
     sourceMap: true 
    } 
}, { 
    loader: "less-loader", options: { 
     sourceMap: true 
    } 
}] 

---

Alte Post vor OP Github Änderungen.

Andere Option ist devtoolLineToLine: true in Ihrem output hinzuzufügen, wenn Sie devtool: 'source-map' verwenden möchten. Aber devtoolLineToLine ist veraltet, also erwägen Sie, devtool zu etwas anderem zu ändern.devtool: 'source-map' demo image

output: isTest ? {} : { 
    devtoolLineToLine: true, // <= this line 

    sourceMapFilename: '[name].map', 
    path: __dirname + '/dist', 
    filename: '[name].bundle.js', 
    publicPath: publicPath 
}, 

---

Alternativ können Sie devtool: 'eval' oder eine Variation von eval verwenden, wie cheap-module-eval-source-map (ähnliches Verhalten, jedoch ohne Dateinamen) also works fine for me

Answer 3

Es gibt nichts mit dem Webpack Config falsch ist hier https://github.com/coreysnyder/Angular-Webpack3-Seed

Hier ist ein gif mit Ihrem Code & Setzen eines Haltepunktes in view1 Datei

Und hier ist, warum der Text

blau ist und ich kann die Quelle ganz gut

Das Hauptproblem sehen, ist die less-loader Sie brauchen um die Quellkartenoptionen für beide zu übergeben, die less-loader & css-loadercheck the readme

{ 
    test: /\.less$/, 
    use: [ 
     { 
     loader: 'style-loader', 
     }, 
     { 
     loader: 'css-loader', 
     options: { 
      sourceMap: true, 
     }, 
     }, 
     { 
     loader: 'less-loader', 
     options: { 
      sourceMap: true, 
     }, 
     }, 
    ], 
    }, 

Nach Dadurch können Sie aus dem Bedienfeld Stile debuggen wie diese

Wenn Sie direkt die .less Dateien in der Readme erwähnt einen Blog-Post bearbeiten möchten, dass kann mit diesem helfen

Ich hoffe, dass dies Ihre Frage beantwortet