Come faccio a generare sourcemap quando utilizzo babel e webpack?

Sono nuovo del webpack e ho bisogno di una mano nell'impostazione per generare mappe di origine. Sto correndo webpack servedalla riga di comando, che si compila con successo. Ma ho davvero bisogno di sorgenti. Questo è il mio 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()
  ]

};

Sono veramente nuovo nel webpack, e anche se i documenti non mi hanno aiutato, non sono sicuro di quale sia il problema specifico.

Al fine di carta Sorgente, è necessario modificare devtooll'opzione valore dal trueal valore di cui disponibili in this list, per esempio,source-map

devtool: 'source-map'

devtool: 'source-map'- Viene emessa una SourceMap.

Forse qualcun altro ha questo problema ad un certo punto. Se si utilizza UglifyJsPluginin, webpack 2è necessario specificare esplicitamente il sourceMapflag. Per esempio:

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

Configurazione minima del webpack per jsx con 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']
        }
      }
    ]
  },
};

Eseguendolo:

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 stai ottimizzando per la produzione dev + , puoi provare qualcosa del genere nella tua configurazione:

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

Dai documenti:

• devtool: "eval-cheap-module-source-map" offre SourceMaps che mappa solo le linee (senza mappature di colonne) e sono molto più veloci
• devtool: "source-map" non può memorizzare nella cache SourceMaps per i moduli e deve rigenerare SourceMap completa per il blocco. È qualcosa per la produzione.

Sto usando il webpack 2.1.0-beta.19

Su Webpack 2 ho provato tutte e 12 le opzioni di devtool. Le seguenti opzioni si collegano al file originale nella console e mantengono i numeri di riga. Vedi la nota sotto re: solo righe.

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

devtool migliori opzioni di sviluppo

                                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 linee

Le mappe di origine sono semplificate in un'unica mappatura per riga. Questo di solito significa una singola mappatura per istruzione (supponendo che il tuo autore sia così). Ciò impedisce l'esecuzione del debug a livello di istruzione e dai punti di interruzione delle impostazioni nelle colonne di una riga. La combinazione con la riduzione al minimo non è possibile in quanto i minimizzatori di solito emettono una sola riga.

REVISIONE DI QUESTO

In un grande progetto trovo ... il tempo di ricostruzione di eval-source-map è ~ 3.5s ... il tempo di ricostruzione di inline-source-map è ~ 7s

Anche lo stesso problema che ho riscontrato, nel browser mostrava il codice compilato. Di seguito ho apportato modifiche al file di configurazione del webpack e ora funziona perfettamente.

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

e nei caricatori ho tenuto il babel-loader come prima opzione

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