Jak generować sourcemaps podczas korzystania z Babel i WebPacka?

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.

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.

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

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$

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

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

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