javascript - Webpack 2 sourcemaps 不生成

Question

Webpack 2 source-map 不为 javascript 和 css 生成。它甚至不显示错误。我使用了与官方文档相同的语法。我什至将 uglifyJs 插件 sourcemap 参数添加为 true。谁能帮帮我？

下面是我的webpack配置

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'
      },
    ]
  }
}

Answer 1

我遇到了同样的问题，但我终于让 webpack 通过使用 SourceMapDevToolPlugin 为我的 .jsx 文件吐出源映射。我直接从文档中的示例中复制了它； https://webpack.js.org/plugins/source-map-dev-tool-plugin/

希望对您有所帮助:)