Bagaimana cara menghasilkan peta sumber saat menggunakan babel dan webpack?

Saya baru mengenal webpack, dan saya memerlukan bantuan dalam pengaturan untuk membuat peta sumber. Saya menjalankan webpack servedari baris perintah, yang mengkompilasi dengan sukses. Tapi aku benar-benar membutuhkan peta sumber. Ini milik saya 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()
  ]

};

Saya benar-benar baru di webpack, dan melihat meskipun dokumen tidak benar-benar membantu karena saya tidak yakin apa masalah ini khusus.

Untuk menggunakan peta sumber, Anda harus mengubah nilaidevtool opsi dari ke nilai yang tersedia di , misalnyatruethis listsource-map

devtool: 'source-map'

devtool: 'source-map'- SourceMap dipancarkan.

Mungkin orang lain memiliki masalah ini pada satu titik. Jika Anda menggunakan di UglifyJsPlugindalam, webpack 2Anda perlu menentukan sourceMapbendera secara eksplisit . Sebagai contoh:

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

Konfigurasi webpack minimal untuk jsx dengan folder sumber:

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

Menjalankannya:

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$

Jika mengoptimalkan untuk dev + produksi , Anda dapat mencoba sesuatu seperti ini di konfigurasi Anda:

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

Dari dokumen:

• devtool: "eval-cheap-module-source-map" menawarkan SourceMaps yang hanya memetakan garis (tidak ada pemetaan kolom) dan jauh lebih cepat
• devtool: "source-map" tidak bisa men-cache SourceMaps untuk modul dan perlu meregenerasi SourceMap lengkap untuk chunk. Ini sesuatu untuk produksi.

Saya menggunakan webpack 2.1.0-beta.19

Di Webpack 2 saya mencoba semua 12 opsi devtool. Opsi berikut ini menautkan ke file asli di konsol dan menyimpan nomor baris. Lihat catatan di bawah ini: baris saja.

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

devtool pilihan dev terbaik

                                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

hanya garis

Source Maps disederhanakan menjadi pemetaan tunggal per baris. Ini biasanya berarti pemetaan tunggal per pernyataan (dengan asumsi Anda adalah penulis seperti ini). Ini mencegah Anda dari men-debug eksekusi pada tingkat pernyataan dan dari pengaturan breakpoint pada kolom garis. Menggabungkan dengan meminimalkan tidak mungkin dilakukan karena minimizer biasanya hanya memancarkan satu baris.

MENGUNGKAPKAN INI

Pada proyek besar saya menemukan ... eval-source-map waktu pembangunan kembali adalah ~ 3.5s ... inline-source-peta waktu pembangunan kembali adalah ~ 7s

Bahkan masalah yang sama saya hadapi, di browser itu menunjukkan kode yang dikompilasi. Saya telah membuat perubahan di bawah ini dalam file konfigurasi webpack dan sekarang berfungsi dengan baik.

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

dan di loader saya terus babel-loader sebagai opsi pertama

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