Webpack 2のソースマップが生成されない

Question

Webpack 2のソースマップが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を使用することによって、私の.jsxのファイルに対してsourcemapsを吐き出すのWebPACKなっています。私はドキュメントの例からそのままコピーしました。 https://webpack.js.org/plugins/source-map-dev-tool-plugin/

はそれが役に立てば幸い:)

Answer 2

エントリdevtool: 'cheap-module-eval-source-map',前にこのコード行を追加し、その後、デバッガでエラーの正確な行数を取得する必要があります。