如何在使用babel和webpack时生成源图？

本文翻译自：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. 我是webpack的新手，我需要设置一下来生成源图。 I'm running webpack serve from the command line, which compiles successfully. 我正在webpack serve运行webpack serve ，它可以成功编译。 But I really need sourcemaps. 但我真的需要源图。 This is my webpack.config.js . 这是我的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. 我是webpack的新手，看起来虽然文档并没有真正起作用，因为我不确定这个问题的具体内容。

---

#1楼

参考：https://stackoom.com/question/25Wuc/如何在使用babel和webpack时生成源图

---

#2楼

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选项值从true更改this list中可用的值 ，例如source-map

devtool: 'source-map'

devtool : 'source-map' - A SourceMap is emitted. devtool ： 'source-map' - 发出一个SourceMap。

---

#3楼

Minimal webpack config for jsx with sourcemaps: 带有源映射的jsx的最小webpack配置：

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: 如果优化dev + production ，你可以在你的配置中尝试这样的东西：

{
  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： “eval-cheap-module-source-map”提供SourceMaps，它只映射行（没有列映射）并且速度更快
• devtool: "source-map" cannot cache SourceMaps for modules and need to regenerate complete SourceMap for the chunk. devtool： “source-map”无法为模块缓存SourceMaps，需要为块重新生成完整的SourceMap。 It's something for production. 这是生产的东西。

I am using webpack 2.1.0-beta.19 我使用的是webpack 2.1.0-beta.19

---

#5楼

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. 我在webpack配置文件中进行了以下更改，现在工作正常。

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

and in loaders I kept babel-loader as first option 在装载机中，我将babel-loader作为第一选择

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

---

#6楼

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. 如果在webpack 2使用UglifyJsPlugin ， webpack 2需要显式指定sourceMap标志。 For example: 例如：

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