Como gerar mapas de origem ao usar babel e webpack?

Eu sou novo no webpack e preciso de uma mão para configurar os mapas de origem. Estou executando a webpack servepartir da linha de comando, que é compilada com êxito. Mas eu realmente preciso de mapas de origem. Este é o meu 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()
  ]

};

Sou realmente novo no webpack e, apesar de os documentos não terem realmente ajudado, não tenho certeza de que esse problema seja específico.

Para usar o mapa de origem, você deve alterar o valor da devtoolopção de para o valor disponível em , por exemplotruethis listsource-map

devtool: 'source-map'

devtool: 'source-map'- Um SourceMap é emitido.

Talvez alguém tenha esse problema em um ponto. Se você usar o UglifyJsPluginin, webpack 2precisará especificar explicitamente o sourceMapsinalizador. Por exemplo:

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

Configuração mínima do webpack para jsx com mapas de origem:

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

Executando:

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$

Se estiver otimizando para a produção do dev + , você pode tentar algo como isto em sua configuração:

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

Dos documentos:

• devtool: "eval-cheap-module-source-map" oferece SourceMaps que apenas mapeia linhas (sem mapeamentos de coluna) e é muito mais rápido
• devtool: "source-map" não pode armazenar em cache o SourceMaps para módulos e precisa gerar novamente o SourceMap completo para a parte. É algo para produção.

Estou usando o webpack 2.1.0-beta.19

No Webpack 2, tentei todas as 12 opções de devtool. As seguintes opções são vinculadas ao arquivo original no console e preservam os números de linha. Veja a nota abaixo re: lines apenas.

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

somente linhas

Os mapas de origem são simplificados para um único mapeamento por linha. Isso geralmente significa um único mapeamento por instrução (assumindo que o autor seja assim). Isso evita que você depure a execução no nível da instrução e defina pontos de interrupção nas colunas de uma linha. Combinar com minimizar não é possível, pois os minimizadores geralmente emitem apenas uma única linha.

REVISITANDO ISTO

Em um projeto grande, acho que ... o tempo de reconstrução do mapa de origem-eval é ~ 3.5s ... o tempo de reconstrução do mapa-fonte-inline é ~ 7s

Mesmo o mesmo problema que enfrentei, no navegador, ele mostrava o código compilado. Fiz abaixo as alterações no arquivo de configuração do webpack e está funcionando bem agora.

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

e em carregadores eu mantive o babel-loader como primeira opção

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