Comment générer des sourcemaps lorsque j'utilise babel et webpack?

Je suis nouveau sur webpack, et j'ai besoin d'un coup de main dans la configuration pour générer des sourcemaps. Je cours webpack servedepuis la ligne de commande, qui se compile avec succès. Mais j'ai vraiment besoin de sourcemaps. Ceci est mon 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()
  ]

};

Je suis vraiment nouveau sur webpack, et regarder si la documentation n'a pas vraiment aidé car je ne sais pas à quoi ce problème est spécifique.

Pour utiliser la carte source, vous devez changer la valeur de l' devtooloption de la valeur disponible dans , par exempletruethis listsource-map

devtool: 'source-map'

devtool: 'source-map'- Un SourceMap est émis.

Peut-être que quelqu'un d'autre a ce problème à un moment donné. Si vous utilisez le UglifyJsPlugindans, webpack 2vous devez spécifier explicitement l' sourceMapindicateur. Par exemple:

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

Configuration minimale du webpack pour jsx avec 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']
        }
      }
    ]
  },
};

Exécuter:

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 vous optimisez pour la production dev + , vous pouvez essayer quelque chose comme ceci dans votre configuration:

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

De la documentation:

• devtool: "eval-cheap-module-source-map" propose des SourceMaps qui mappent uniquement les lignes (pas de mappage de colonnes) et sont beaucoup plus rapides
• devtool: "source-map" ne peut pas mettre en cache SourceMaps pour les modules et doit régénérer SourceMap complet pour le bloc. C'est quelque chose pour la production.

J'utilise webpack 2.1.0-beta.19

Sur Webpack 2, j'ai essayé les 12 options de devtool. Les options suivantes sont liées au fichier d'origine dans la console et conservent les numéros de ligne. Voir la note ci-dessous concernant les lignes uniquement.

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

devtool meilleures options de développement

                                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

lignes uniquement

Les cartes sources sont simplifiées en une seule cartographie par ligne. Cela signifie généralement un seul mappage par instruction (en supposant que votre auteur soit ainsi). Cela vous empêche de déboguer l'exécution au niveau de l'instruction et de définir des points d'arrêt sur les colonnes d'une ligne. La combinaison avec la minimisation n'est pas possible car les minimiseurs n'émettent généralement qu'une seule ligne.

REVISITER CELA

Sur un grand projet, je trouve ... le temps de reconstruction eval-source-map est ~ 3.5s ... le temps de reconstruction inline-source-map est ~ 7s

Même problème que j'ai rencontré, dans le navigateur, il montrait du code compilé. J'ai apporté ci-dessous des modifications dans le fichier de configuration webpack et cela fonctionne bien maintenant.

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

et dans les chargeurs, j'ai gardé babel-loader comme première 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' }
]