webpack-dev-server：如何获取原始文件的错误行号答案

【问题标题】：webpack-dev-server: how to get error line numbers of orignal fileswebpack-dev-server：如何获取原始文件的错误行号
【发布时间】：2017-05-05 13:59:40
【问题描述】：

随着 webpack-dev-server 的运行，输出中的所有错误似乎都指向 bundle.js 中的行号，而不是原始源文件。如何获取原始源文件的行号？我正在为 ES2015 js 使用带有 babel 的 webpack。

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}/`);
});

full source code

【问题讨论】：

标签： webpack babeljs webpack-dev-server

【解决方案1】：

我必须在我的 babel 加载器中添加 retainLines 选项：

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

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

文档说

保留行号。这会导致代码古怪，但对于无法使用源映射的场景很方便。

如果有人知道一种不会导致“古怪”代码（无论是什么意思）的方法，请告诉我。

【讨论】：

如果我有类似的东西，这将如何工作：模块：{加载器：[{测试：/\.jsx？$/，排除：/（node_modules|bower_components）/，加载器：'babel- loader', query: { extends: path.join(__dirname, '.babelrc'), }, }, ..... ?
这个语法没试过，但可能loader: 'babel-loader', query: { extends: path.join(__dirname, '.babelrc'), retainLines: true } ?
对于babel-loader，将其添加到options 中，例如-{ loader: "babel-loader", options: { retainLines: true, }, }

【解决方案2】：

在你的 webpack 配置中使用cheap-module-source-map。

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

【讨论】：