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


328

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 info, n'ajoutez pas de débogage pour la version 2, j'ai reçuThe 'debug' property was removed in webpack 2.
shareef

Réponses:


435

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.


12
La denugpropriété a été supprimée dans le webpack 2.
jnns

@jnns Qu'est-ce qui l'a remplacé?
Brad

6
Je peux confirmer (webpack 3.5): devtoolc'est suffisant. Pas besoin de valeur de débogage.
Frank Nocke

Je voudrais juste ajouter que si vous utilisez React, vous devriez trouver la configuration spécifique pour lui (create-react-app).
aube

Où sort-il réellement le fichier?
Melbourne Developer

107

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 })

9
Je devais également inclure devtool: 'source-map'pour que cela fonctionne
Vic

1
J'ai dû l'inclure dans les options du chargeur CSS et SASS.
d_rail

33

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$

15

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


2
une liste récente et assez précise pour les performances de build + rebuild est ici dans les documents officiels
Frank Nocke

Où / comment est devdéfinie la variable?
Chris

dans des cas typiques, vous pouvez voir des .envfichiers définis ou des mutations process.env. ce n'est qu'un exemple mais cela pourrait ressembler à ceci:const dev = process.env.development === true
lfender6445

6

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


3

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

6
La debugpropriété a été supprimée dans le webpack 2.
jnns

+1. L'ajout de l' includeoption est ce qui l'a corrigé pour moi. Dans le webpack 2, cela ressemble à ceci:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]
Matt Browne
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.