如何在使用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/

體將您的調試/控制檯行的代碼的實際行。它會創造更大的捆綁。