Statische Ressourcen werden in Chrome Dev Tools nicht angezeigt.

Mit einer einfachen react + webpack-App, aber ich habe Probleme beim Debuggen, weil die statischen Ressourcen nicht in den Dev Tools geladen werden (und ich kann nicht arbeiten) ! warum aus Stützpunkte nicht funktionieren)Statische Ressourcen werden in Chrome Dev Tools nicht angezeigt.

Haben Sie die folgenden in meinem webpack.config.js Datei:

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = { 
    devtool: 'eval-source-map', 
    entry: path.join(__dirname, 'src', 'app.js'), 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: path.join(__dirname, 'src'), 
     loader: ['babel-loader'], 
     query: { 
      cacheDirectory: 'babel_cache', 
      presets: ['react', 'es2015'] 
     } 
     }, 
     { 
     test: /\.css/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader") 
     }, 
     { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file-loader' 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
    }), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { warnings: false }, 
     mangle: true, 
     sourcemap: false, 
     beautify: false, 
     dead_code: true 
    }), 
    new ExtractTextPlugin("styles.css") 
    ] 
};

Und meine ausdrückliche App serviert den/dist-Ordner:

app.use('/static', Express.static(path.join(__dirname, '..', 'dist')));

Wie auch immer, wenn ich tr y den Quellcode (unter Verwendung eines sourcemap), meine dev Werkzeuge nur zu sehen ist, zeigt die folgenden:

Wenn ich navigieren zu localhost: 3000/static/bundle.js und localhost: 3000/static/bundle.js.map zeigt die Dateien im Klartext an. Meine App funktioniert auch (dh der JS wird verwendet), scheint aber nicht in Chrome zu erscheinen. Fehle ich etwas sehr offensichtlich hier?

Danke für jede Hilfe!

Quelle

2017-01-31 Sphyxxy

Bitte verwenden Sie keine 'UglifyJs, Dedupe' Plugins im Entwicklungsmodus. – Vikramaditya

Also einen Weg gefunden, dies zu tun, nur wenn Sie dies in der Zukunft lesen.

Die Frage war ich hatte, dass ich index.ejs wurde mit der Auszeichnungs anzuzeigen:

index.ejs

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Title</title> 
    <link rel="stylesheet" href="styles.css"> 
    </head> 
    <body> 
    <div id="main"><%- markup -%></div> 
    </body> 
</html>

server.js

return res.render('index', { markup });

ich nicht darunter wurde dist/bundle.js in meine .ejs-Datei, und das bedeutete, dass Chrome Tools es nicht abholen. Ich habe <script src="static/bundle.js"></script> zu meinem index.ejs hinzugefügt (obwohl dies nicht unbedingt notwendig ist, damit der Code funktioniert!) Und es wurde endlich in den Chrome-Entwicklungstools angezeigt.

Ich kann nun endlich Breakpoints in meinem Code und Debug setzen, sowie meine .js-Dateien auf der Registerkarte Source öffnen, so scheint alles in Ordnung zu sein.

Ich wäre interessiert zu hören, ob es eine andere Möglichkeit gibt, dies zu tun, eine, die nicht unnötig das Bundle.js Skript in den HTML-Code zu bekommen.

Quelle

2017-02-01 15:22:03 Sphyxxy

Statische Ressourcen werden in Chrome Dev Tools nicht angezeigt.

Antwort

Verwandte Themen