如何在使用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开发服务器，热重新加载捆绑。

//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对django的反应教程。

捆绑包作为静态资产加载到Django模板中，该模板将运行我的整个项目。但是，我不相信任何Django代码会影响我想要处理的错误消息。

有什么建议吗？

Answer 1

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

体将您的调试/控制台行的代码的实际行。它会创造更大的捆绑。