Javascript 网页包2未生成源地图

未为javascript和css生成Webpack 2源映射。它甚至没有显示错误。我使用了与官方文档相同的语法。我甚至将uglifyJs插件sourcemap参数添加到true。谁能帮帮我吗

下面是我的网页配置

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');

const extractSass = new ExtractTextPlugin({
  filename: "vendor-styles.css"
});

module.exports = {
  entry: './js/app/index.js',

  output: {
    path: path.resolve(__dirname, "./js/dist/"),
    filename: "[name].js"
  },

  devtool: "source-map",

  plugins: [
    extractSass,
    new webpack.ProvidePlugin({
      Promise: 'es6-promise-promise',
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        return module.context && module.context.indexOf('node_modules') !== -1;
      }
    }),
    new webpack.optimize.UglifyJsPlugin({sourceMap: true})
  ],

  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",

        query: {
          presets: [
            'env',
            'react'
          ]
        }
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [{
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: true
            }
          }, {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }],
          // use style-loader in development
          fallback: "style-loader"
        })
      },
      {
        test: /\.css$/,
        use: extractSass.extract({
          use: [{
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: true
            }
          }],
          // use style-loader in development
          fallback: "style-loader"
        })
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
      },
      {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/octet-stream&name=/css/fonts/[name].[ext]"
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: "file-loader?name=/css/fonts/[name].[ext]"
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=image/svg+xml&name=/css/fonts/[name].[ext]"
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: 'url-loader'
      },
    ]
  }
}

---

我也遇到了同样的问题，但我最终通过使用SourceMapDevToolPlugin获得了webpack，为我的.jsx文件吐出了sourcemaps。我直接从文档中的示例中复制了它

---

希望它有帮助：）

在输入前添加这行代码

devtool:“廉价模块评估源代码映射”，

然后在调试器中，您应该得到错误的准确行号。

是的，它也会给您css的准确行号。试试看