How do I generate sourcemaps when using babel and webpack?

问题

I\'m new to webpack, and I need a hand in setting up to generate sourcemaps. I\'m running webpack serve from the command line, which compiles successfully. But I really need sourcemaps. This is my webpack.config.js.

var webpack = require(\'webpack\');

module.exports = {

  output: {
    filename: \'main.js\',
    publicPath: \'/assets/\'
  },

  cache: true,
  debug: true,
  devtool: true,
  entry: [
      \'webpack/hot/only-dev-server\',
      \'./src/components/main.js\'
  ],

  stats: {
    colors: true,
    reasons: true
  },

  resolve: {
    extensions: [\'\', \'.js\', \'.jsx\'],
    alias: {
      \'styles\': __dirname + \'/src/styles\',
      \'mixins\': __dirname + \'/src/mixins\',
      \'components\': __dirname + \'/src/components/\',
      \'stores\': __dirname + \'/src/stores/\',
      \'actions\': __dirname + \'/src/actions/\'
    }
  },
  module: {
    preLoaders: [{
      test: /\\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: \'jsxhint\'
    }],
    loaders: [{
      test: /\\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: \'react-hot!babel-loader\'
    }, {
      test: /\\.sass/,
      loader: \'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax\'
    }, {
      test: /\\.scss/,
      loader: \'style-loader!css!sass\'
    }, {
      test: /\\.(png|jpg|woff|woff2)$/,
      loader: \'url-loader?limit=8192\'
    }]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]

};

I\'m really new to webpack, and looking though the docs hasn\'t really helped as I\'m not sure what this problem is specific to.

回答1:

In order to use source map, you should change devtool option value from true to the value which available in this list, for instance source-map

devtool: 'source-map'

devtool: 'source-map' - A SourceMap is emitted.

回答2:

Maybe someone else has this problem at one point. If you use the UglifyJsPlugin in webpack 2 you need to explicitly specify the sourceMap flag. For example:

new webpack.optimize.UglifyJsPlugin({ sourceMap: true })

回答3:

Minimal webpack config for jsx with sourcemaps:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: `./src/index.jsx` ,
  output: {
    path:  path.resolve(__dirname,"build"),
    filename: "bundle.js"
  },
  devtool: 'eval-source-map',
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

Running it:

Jozsefs-MBP:react-webpack-babel joco$ webpack -d
Hash: c75d5fb365018ed3786b
Version: webpack 1.13.2
Time: 3826ms
        Asset     Size  Chunks             Chunk Names
    bundle.js   1.5 MB       0  [emitted]  main
bundle.js.map  1.72 MB       0  [emitted]  main
    + 221 hidden modules
Jozsefs-MBP:react-webpack-babel joco$

回答4:

If optimizing for dev + production, you could try something like this in your config:

{
  devtool: dev ? 'eval-cheap-module-source-map' : 'source-map',
}

From the docs:

• devtool: "eval-cheap-module-source-map" offers SourceMaps that only maps lines (no column mappings) and are much faster
• devtool: "source-map" cannot cache SourceMaps for modules and need to regenerate complete SourceMap for the chunk. It’s something for production.

I am using webpack 2.1.0-beta.19

回答5:

On Webpack 2 I tried all 12 devtool options. The following options link to the original file in the console and preserve line numbers. See the note below re: lines only.

https://webpack.js.org/configuration/devtool

devtool best dev options

                                build   rebuild      quality                       look
eval-source-map                 slow    pretty fast  original source               worst
inline-source-map               slow    slow         original source               medium
cheap-module-eval-source-map    medium  fast         original source (lines only)  worst
inline-cheap-module-source-map  medium  pretty slow  original source (lines only)  best

lines only

Source Maps are simplified to a single mapping per line. This usually means a single mapping per statement (assuming you author is this way). This prevents you from debugging execution on statement level and from settings breakpoints on columns of a line. Combining with minimizing is not possible as minimizers usually only emit a single line.

REVISITING THIS

On a large project I find ... eval-source-map rebuild time is ~3.5s ... inline-source-map rebuild time is ~7s

回答6:

Even same issue I faced, in browser it was showing compiled code. I have made below changes in webpack config file and it is working fine now.

 devtool: '#inline-source-map',
 debug: true,

and in loaders I kept babel-loader as first option

loaders: [
  {
    loader: "babel-loader",
    include: [path.resolve(__dirname, "src")]
  },
  { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
  { test: /\.html$/, loader: 'raw' },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
      'file?hash=sha512&digest=hex&name=[hash].[ext]',
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  },
  {test: /\.less$/, loader: "style!css!less"},
  { test: /\.styl$/, loader: 'style!css!stylus' },
  { test: /\.css$/, loader: 'style!css' }
]

回答7:

You can try Dawn, it's simpler

https://github.com/alibaba/dawn

example:

Install

npm i dawn -g

Add a .dawn.yml file to your project

build:
  - name: webpack
    output: ./dist
    entry: ./src/*.js
    template: ./assets/*.html
    sourceMap: true

Execute the following command

dn build

You can complete the build

来源：https://stackoverflow.com/questions/30870830/how-do-i-generate-sourcemaps-when-using-babel-and-webpack