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

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

希望有所帮助：）

Answer 2

在条目devtool: 'cheap-module-eval-source-map',之前添加这行代码，然后在调试器中，您应该得到确切的错误行号。

Webpack 2源图没有生成

2 个答案: