靜態資源未顯示在Chrome開發工具中

Question

遇到一個簡單的react + webpack應用程序，但是我遇到了調試問題，因為靜態資源似乎沒有加載到開發工具中（而且我無法弄清為什么斷點不起作用！）

在我的webpack.config.js文件中獲得了以下內容：

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

但是，當我嘗試查看源代碼（使用源映射）時，我的開發工具僅顯示以下內容：

當我導航到localhost：3000 / static / bundle.js和localhost：3000 / static / bundle.js.map時，它以純文本格式顯示文件。 我的應用程序也可以運行（例如，正在使用JS），但似乎沒有在Chrome中顯示。 我在這里錯過了很明顯的東西嗎？

謝謝你的幫助！

Answer 1

因此，找到了一種方法，以防萬一您將來要閱讀。

我遇到的問題是我正在使用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工具沒有將其選中。 我在我的index.ejs中添加了<script src="static/bundle.js"></script> （盡管對於代碼的工作不是絕對必要的！），它最終開始出現在chrome開發工具中。

現在，我終於可以在代碼中設置斷點並進行調試，以及在“源”選項卡中打開.js文件，因此一切似乎都工作正常。

我很想知道是否還有另一種方法可以做到這一點，而不涉及不必要地在html中獲取bundle.js腳本。

靜態資源未顯示在Chrome開發工具中

問題描述

1 個解決方案

解決方案1
0 已采納 2017-02-01 15:22:03

靜態資源未顯示在Chrome開發工具中

問題描述

1 個解決方案

解決方案1 0 已采納 2017-02-01 15:22:03

解決方案1
0 已采納 2017-02-01 15:22:03