ChromeのDevツールに静的リソースが表示されない

単純なreact + webpackアプリを使用してラウンドしても、静的リソースが開発ツールに読み込まれていないように見えるため、デバッグに問題が発生しています！ChromeのDevツールに静的リソースが表示されない

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") 
    ] 
};

をそして、私の急行アプリは/ distのフォルダアップ機能：

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

をなぜブレークポイントが機能していない）

は私webpack.config.jsファイルに次のように手に入れましたしかし、I trソースコード（sourcemapを使用して）表示するために、Y、私のDEVツールのみ表示されている次

私はlocalhostに移動：3000 /静的/ bundle.jsとローカルホストを：3000 /静的/ bundle.js.mapは、ファイルを平文で表示します。私のアプリも「働いています」（つまりJSが使用されています）、Chromeでは表示されません。私はここで非常に明白な何かを逃しています

ありがとうございました！

出典

2017-01-31 Sphyxxy

開発モードで 'UglifyJs、Dedupe'プラグインを使用しないでください。 – Vikramaditya

これを行う方法が見つかったので、これを将来読んでみてください。私が持っていた

問題は、私はマークアップを表示するindex.ejsを使用していたということでした。

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 });

dist/bundle.jsを私の.ejsファイルに書き込むと、これはChromeツールがそれを受け取っていないことを意味します。私は<script src="static/bundle.js"></script>をindex.ejsに追加しました（コードが動作するためには厳密には必要ありませんが）！そして、これは最後にchrome開発ツールに現れ始めました。

最終的に私のコードとデバッグでブレークポイントを設定できるようになりました。また、ソースタブで.jsファイルを開くので、すべて正常に動作しているようです。

これは、HTMLでbundle.jsスクリプトを不必要に取得する必要がない別の方法があると聞きたいと思います。

出典

2017-02-01 15:22:03 Sphyxxy

ChromeのDevツールに静的リソースが表示されない

答えて

関連する問題