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 Tools没有提取它。我在我的index.ejs中添加了<script src="static/bundle.js"></script>（尽管代码不是必需的！）并且它最终开始出现在chrome dev工具中。

我现在终于可以在我的代码和调试中设置断点，以及在Source选项卡中打开我的.js文件，所以一切似乎都正常。

我有兴趣听听是否有其他方法可以做到这一点，而且不会在html中不必要地获取bundle.js脚本。

Chrome Dev Tools

1 个答案: