javascript - Webpack "devtool eval"在 devtools 中没有显示正确的文件内容

Question

我有相对简单的 webpack 配置文件(如下):

module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js"
    },
  devtool: "eval",
    module: {
    loaders: [
      {
        test: /\.css$/, loader: "style!css",
        exclude: /node_modules/,
      },
      { 
        test   : /.js$/,
        loader : 'babel-loader' ,
        exclude: /node_modules/
      }
    ]
  }
};

我正在使用 webpack-dev-server 在开发中使用以下命令为应用程序提供服务 webpack-dev-server --inline --hot --port 9090 --内容库 public/--watch.

我读到建议在开发时对源映射使用 eval，但它对我不起作用。我在 devtools 中得到的内容如下。它正确显示文件(main.js 和 hello.js)但它包含 babel 转译的内容，而不是原始内容。当我将它设置为 eval-source-map 时，它工作正常。

我的设置有什么问题？此问题的完整项目可用 here

Answer 1

请查看官方 Webpack 文档以了解每个 Source Maps 设置的详细信息 - http://webpack.github.io/docs/configuration.html#devtool .

如果您想要原始行(未转译)，请使用文档表中列出的选项。

| Devtool                       | Quality                      |
| ----------------------------- | ---------------------------- |
| cheap-module-eval-source-map  | original source (lines only) |                  
| ----------------------------- | ---------------------------- |
| cheap-module-source-map       | original source (lines only) |                   
| ----------------------------- | ---------------------------- |
| eval-source-map               | original source              | 
| ----------------------------- | ---------------------------- |
| source-map                    | original source              |