Como gerar mapas de origem ao usar babel e webpack?

328

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.

Rollo
fonte
FYI não adicione depuração para a versão 2, eu tenhoThe 'debug' property was removed in webpack 2.
shareef

Respostas:

435

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.

Alexander T.
fonte
12
A denugpropriedade foi removido em Webpack 2.
jnns
@jnns O que o substituiu?
318 Brad
6
Posso confirmar (webpack 3.5): devtoolé suficiente. Não há necessidade de qualquer valor de depuração.
19417 Frank Nocke
Gostaria apenas de acrescentar que, se você estiver usando o React, deverá encontrar a configuração específica (create-react-app).
madrugada
Para onde ele realmente produz o arquivo?
Melbourne Developer
107

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 })
Alex Moldovan
fonte
9
Eu tive que incluir também devtool: 'source-map'para que ele funcione
Vic
1
Eu tive que incluir isso nas opções de css e sass loader.
d_rail
33

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$
jhegedus
fonte
15

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

lfender6445
fonte
2
recente liste, muito preciso para construir + reconstruir desempenho é aqui nos docs oficiais
Frank Nocke
Onde / como a devvariável é definida?
Chris
em casos típicos, você pode ver .envarquivos definidos ou sofrer mutações process.env. este é apenas um exemplo, mas poderia ser assim:const dev = process.env.development === true
lfender6445
6

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

danday74
fonte
3

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' }
]
Dijo
fonte
6
A debugpropriedade foi removido em Webpack 2.
jnns
+1. Adicionar a includeopção é o que a corrigiu. Em Webpack 2 parece que isso:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]
Matt Browne