¿Cómo genero mapas fuente cuando uso babel y webpack?

Soy nuevo en webpack, y necesito una mano en la configuración para generar mapas de origen. Estoy corriendo webpack servedesde la línea de comando, que se compila con éxito. Pero realmente necesito mapas fuente. Este es mi 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()
  ]

};

Soy realmente nuevo en webpack, y mirar los documentos realmente no ha ayudado, ya que no estoy seguro de a qué se debe este problema.

Con el fin de mapa de origen uso, debe cambiar devtoolla opción de valor a partir truedel valor de lo que está disponible en this list, por ejemplo,source-map

devtool: 'source-map'

devtool: 'source-map'- Se emite un SourceMap.

Quizás alguien más tenga este problema en algún momento. Si se utiliza el UglifyJsPluginde webpack 2debe especificar explícitamente la sourceMapbandera. Por ejemplo:

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

Configuración mínima del paquete web para jsx con mapas de origen:

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

Ejecutándolo:

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$

Si está optimizando para la producción dev + , puede intentar algo como esto en su configuración:

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

De los documentos:

• devtool: "eval-cheap-module-source-map" ofrece SourceMaps que solo asigna líneas (no asignaciones de columnas) y es mucho más rápido
• devtool: "source-map" no puede almacenar en caché SourceMaps para módulos y necesita regenerar SourceMap completo para el fragmento. Es algo para la producción.

Estoy usando webpack 2.1.0-beta.19

En Webpack 2 probé las 12 opciones de devtool. Las siguientes opciones enlazan con el archivo original en la consola y conservan los números de línea. Consulte la nota a continuación con respecto a las líneas solamente.

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

las mejores opciones de desarrollo de devtool

                                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

solo líneas

Los mapas de origen se simplifican a una sola asignación por línea. Esto generalmente significa una sola asignación por declaración (suponiendo que su autor sea de esta manera). Esto le impide depurar la ejecución a nivel de instrucción y establecer puntos de interrupción en las columnas de una línea. La combinación con la minimización no es posible ya que los minimizadores generalmente solo emiten una sola línea.

REVISANDO ESTO

En un proyecto grande que encuentro ... el tiempo de reconstrucción de eval-source-map es ~ 3.5s ... el tiempo de reconstrucción de inline-source-map es ~ 7s

Incluso el mismo problema que enfrenté, en el navegador mostraba código compilado. He realizado los siguientes cambios en el archivo de configuración del paquete web y ahora funciona bien.

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

y en cargadores mantuve babel-loader como primera opción

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