reactjs - 使用 webpack 时如何跟踪 Reactjs 控制台错误？

Question

我正在关注 redux tutorial并使用 webpack 捆绑 js 文件。

我的问题是，React 的控制台错误通过 webpack 包显示堆栈跟踪，而我希望它们通过实际的 js 代码显示堆栈跟踪。

例如，我在其中一个 js 文件中引入了拼写错误来演示。这是 Chromium 控制台中的错误: Screenshot of current error messages

我知道源映射，并且我已启用它们。它们允许我添加断点之类的东西，但它们似乎不允许从预捆绑的代码中打印错误消息。

这是 package.json:

{
  "name": "feedmeapp",
  "version": "0.0.1",
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.6.5",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "eslint": "^2.13.1",
    "react": "^0.14.7",
    "react-hot-loader": "^1.3.0",
    "redux-devtools": "^3.1.1",
    "webpack": "^1.12.13",
    "webpack-bundle-tracker": "0.0.93",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "es6-promise": "^3.1.2",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.5.1",
    "radium": "^0.16.6",
    "react-cookie": "^0.4.5",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.0",
    "redux": "^3.3.1",
    "redux-thunk": "^1.0.3"
  }
}

这是我的两层 webpack 配置:

//webpack.base.config.js

var path = require("path")
var webpack = require('webpack')

module.exports = {
  context: __dirname,

  entry: {
    // Add as many entry points as you have container-react-components here
    App1: './reactjs/App1',
    vendors: ['react'],
  },

  output: {
      path: path.resolve('./feedmeapp/static/bundles/local/'),
      filename: "[name]-[hash].js"
  },

  externals: [
  ], // add all vendor libs

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
  ], // add all common plugins here

  module: {
    loaders: [] // add all common loaders here
  },

  resolve: {
    modulesDirectories: ['node_modules', 'bower_components'],
    extensions: ['', '.js', '.jsx']
  },
}

第二个文件:

// webpack.local.config.js

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var config = require('./webpack.base.config.js')

var ip = 'localhost'
config.devtool = "#eval-source-map"
config.output.publicPath = 'http://' + ip + ':3000' + '/assets/bundles/'

config.plugins = config.plugins.concat([
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
  new BundleTracker({filename: './webpack-stats-local.json'}),
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('development'),
      'BASE_API_URL': JSON.stringify('http://'+ ip +':8000'),
  }}),
])

config.module.loaders.push(
  { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'] }
)

config.entry = {
  App1: [
    'webpack-dev-server/client?http://' + ip + ':3000',
    'webpack/hot/only-dev-server',
    './reactjs/App1',
  ],
}

module.exports = config

我使用一个简单的 webpack 开发服务器来捆绑它，该服务器可以热重新加载 bundle 。

//server.js

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.local.config')

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  inline: true,
  historyApiFallback: true,
}).listen(3000, config.ip, function (err, result) {
  if (err) {
    console.log(err)
  }

  console.log('Listening at ' + config.ip + ':3000')
})

此工作流程来自 @mbrochh 的有关使用 React 和 django 的教程。

这些包作为静态资源加载到 django 模板中，该模板将运行我的整个项目。但是，我不相信任何 django 代码会影响我尝试对错误消息执行的操作。

有什么建议吗？

Answer 1

您需要一个源映射插件，https://webpack.js.org/configuration/devtool/

它将您的调试/控制台行映射到实际的代码行。不过，它会创建更大的 bundle 。