web-dev-qa-db-fra.com

Comment générer des cartes source lors de l'utilisation de babel et de webpack?

Je suis novice dans WebPack et j'ai besoin d'un coup de main dans la configuration pour générer des cartes source. J'exécute webpack serve à partir de la ligne de commande, qui compile avec succès. Mais j'ai vraiment besoin de cartes sourcem. 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 dans WebPack, et regarder la documentation n'a pas vraiment aidé car je ne suis pas sûr de savoir à quoi ce problème est spécifique.

javascriptwebpackbuild-processbabeljssource-maps
281
Rollo

Afin d’utiliser la carte source, vous devez changer la valeur devtool de true en qui disponible dans this list , par exemple source-map

devtool: 'source-map'

devtool : 'source-map' - Une carte source est émise.

374
Alexander T.

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

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

Configuration minimale du WebPack pour jsx avec des cartes source:

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

Le lancer:

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$
28
jhegedus

Si vous optimisez pour dev + production , vous pouvez essayer quelque chose comme ceci dans votre configuration:

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

à partir de la documentation:

  • devtool: "eval-cheap-module-source-map" offre des cartes source qui ne font que mapper des lignes (pas de mappages de colonnes) et sont beaucoup plus rapides.
  • devtool: "source-map" ne peut pas mettre en cache les cartes SourceMaps des modules et doit régénérer une carte source complète pour le bloc. C’est quelque chose pour la production.

J'utilise webpack 2.1.0-beta.19

13
lfender6445

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

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 source sont simplifiées en une seule correspondance 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. Combiner avec minimiser n'est pas possible car les minimiseurs n'émettent généralement qu'une seule ligne.

REVISITANT CE

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

5
danday74

Même problème que j'ai rencontré, dans le navigateur, il montrait le code compilé. J'ai apporté les modifications ci-dessous au fichier de configuration webpack et tout fonctionne correctement à présent.

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