Jak generować sourcemaps podczas korzystania z Babel i WebPacka?


328

Jestem nowy w webpacku i potrzebuję pomocy w konfiguracji, aby generować sourcemaps. Uruchamiam webpack servez wiersza poleceń, który kompiluje się pomyślnie. Ale naprawdę potrzebuję sourcemaps. To jest mój 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()
  ]

};

Jestem naprawdę nowy w webpacku i szukam choć dokumenty tak naprawdę nie pomogły, ponieważ nie jestem pewien, na czym polega ten problem.


FYI nie dodaje debugowania dla wersji 2, mamThe 'debug' property was removed in webpack 2.
shareef

Odpowiedzi:


435

Aby użyć mapy źródłowej, należy zmienić wartośćdevtool opcji z na wartość dostępną na przykład wtruethis listsource-map

devtool: 'source-map'

devtool: 'source-map'- Emitowana jest mapa źródłowa.


12
denugNieruchomość została usunięta w WebPacka 2.
jnns

@jnns Co go zastąpiło?
Brad

6
Mogę potwierdzić (webpack 3.5): devtoolwystarczy. Nie ma potrzeby żadnej wartości debugowania.
Frank Nocke,

Chciałbym tylko dodać, że jeśli używasz React, powinieneś znaleźć dla niego konkretną konfigurację (create-React-app).
świt

Gdzie faktycznie wyprowadza plik?
Melbourne Developer

107

Może ktoś inny ma ten problem w pewnym momencie. Jeśli używasz UglifyJsPluginw webpack 2, musisz jawnie określić sourceMapflagę. Na przykład:

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

9
Musiałem też załączyć devtool: 'source-map', żeby zadziałało
Vic

1
Musiałem uwzględnić to w opcjach modułu ładującego css i sass.
d_rail

33

Minimalna konfiguracja webpacka dla jsx z 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']
        }
      }
    ]
  },
};

Uruchamianie:

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

Jeśli optymalizujesz pod kątem produkcji dev + , możesz spróbować czegoś takiego w swojej konfiguracji:

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

Z dokumentów:

  • devtool: „eval-cheap-module-source-map” oferuje SourceMapy, które mapują tylko linie (bez mapowania kolumn) i są znacznie szybsze
  • devtool: „mapa-źródła” nie może buforować SourceMap dla modułów i musi zregenerować pełną SourceMap dla porcji. To coś do produkcji.

Używam webpack 2.1.0-beta.19


2
ostatnia, dość dokładna lista wydajności kompilacji i przebudowy znajduje się tutaj w oficjalnych dokumentach
Frank Nocke,

Gdzie / jak devustawiana jest zmienna?
Chris

w typowych przypadkach możesz zobaczyć .envzdefiniowane pliki lub mutacje process.env. to tylko przykład, ale może wyglądać tak:const dev = process.env.development === true
lfender6445

6

Na Webpack 2 wypróbowałem wszystkie 12 opcji devtool. Poniższe opcje prowadzą do oryginalnego pliku w konsoli i zachowują numery linii. Patrz uwaga poniżej tylko: linie:.

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

devtool najlepsze opcje dev

                                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

tylko linie

Mapy źródłowe są uproszczone do jednego mapowania na linię. Zwykle oznacza to pojedyncze mapowanie na instrukcję (zakładając, że autor jest w ten sposób). Zapobiega to debugowaniu wykonania na poziomie instrukcji i ustawianiu punktów przerwania w kolumnach linii. Łączenie z minimalizacją nie jest możliwe, ponieważ minimalizatory zwykle emitują tylko jedną linię.

PRZEGLĄDANIE TO

W dużym projekcie znajduję ... czas przebudowy mapy źródła eval wynosi ~ 3,5 s ... czas przebudowania mapy źródła źródłowego wynosi ~ 7 s


3

Nawet ten sam problem, z którym się spotkałem, w przeglądarce pokazywał skompilowany kod. Wprowadziłem poniższe zmiany w pliku konfiguracyjnym webpack i teraz działa dobrze.

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

aw ładowarkach jako pierwszą opcję zatrzymałem babel-loader

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
debugNieruchomość została usunięta w WebPacka 2.
jnns

+1. Dodanie includeopcji naprawiło to dla mnie. W pakiecie internetowym 2 wygląda to tak:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]
Matt Browne,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.