Webpack-dev-server: how to get orignal file error line numbers

Question

When starting the webpack-dev server, it seems that all errors on the output indicate line numbers in the bundle.js file, and not the original source file. How to get line numbers of source files? I am using webpack with babel for ES2015 js.

webpack.config.dev.js

const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { devtool: '#source-map', entry: [ `webpack-dev-server/client?http://${process.env.npm_package_config_host}:${process.env.npm_package_config_port}`, 'webpack/hot/only-dev-server', 'react-hot-loader/patch', './src/index.dev' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new HtmlWebpackPlugin({ template: 'index.html', // Load a custom template inject: 'body' // Inject all scripts into the body }) ], module: { loaders: [{ test: /\.jsx?$/, loaders: ['babel'], include: path.join(__dirname, 'src') }] } }; 

server.js

 const webpack = require('webpack'); const WebpackDevServer = require('webpack-dev-server'); const config = require('./webpack.config.dev'); const port = process.env.npm_package_config_port || 3000; const host = process.env.npm_package_config_host || 'localhost'; new WebpackDevServer(webpack(config), { publicPath: config.output.publicPath, hot: true, historyApiFallback: true, stats: { colors: true, chunks: false, 'errors-only': true } }).listen(port, host, function (err) { if (err) { console.log(err); } console.log(`Listening at http://${host}:${port}/`); }); 

complete source code

Answer 1

I had to add the saveLines parameter to my buffer loader:

 loaders: [{ test: /\.jsx?$/, loaders: ['babel?retainLines=true'], include: path.join(__dirname, 'src') }] 

https://babeljs.io/docs/usage/options/

The documentation states

Save line numbers. This will lead to stupid code, but will be useful for scenarios where you cannot use the source maps.

If someone knows a method that does not lead to a "stupid" code (whatever that means), please let me know.

Answer 2

use the cheap-module-source-map configuration in your web package configuration.

 const config = { devtool: 'cheap-module-eval-source-map', ... } 

see more https://webpack.js.org/configuration/devtool/