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 --content-base 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。

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

| 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              |

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

Webpack "devtool eval" doesn't show correct files content in devtools

javascript

reactjs

webpack