Bagaimana cara menghasilkan peta sumber saat menggunakan babel dan webpack?


328

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.


FYI tidak menambahkan debug untuk versi 2, saya dapatThe 'debug' property was removed in webpack 2.
shareef

Jawaban:


435

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.


12
The denugproperti telah dihapus di Webpack 2.
jnns

@ jnns Apa yang menggantikannya?
Brad

6
Saya dapat mengkonfirmasi (webpack 3.5): devtoolsudah cukup. Tidak perlu untuk nilai debug.
Frank Nocke

Hanya ingin menambahkan bahwa jika Anda menggunakan Bereaksi, Anda harus menemukan konfigurasi khusus untuk itu (create-react-app).
subuh

Di mana sebenarnya file itu dikirim?
Pengembang Melbourne

107

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

9
Saya juga harus memasukkannya devtool: 'source-map'agar berfungsi
Vic

1
Saya harus memasukkan ini dalam opsi loader css dan sass.
d_rail

33

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$

15

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


2
baru-baru ini, daftar yang cukup tepat untuk kinerja build + rebuild ada di sini di dokumen resmi
Frank Nocke

Di mana / bagaimana devset variabel?
Chris

dalam kasus-kasus tertentu Anda mungkin melihat .envfile-file ditentukan atau mutasi process.env. ini hanya sebuah contoh tetapi bisa terlihat seperti ini:const dev = process.env.development === true
lfender6445

6

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


3

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

6
The debugproperti telah dihapus di Webpack 2.
jnns

+1. Menambahkan includeopsi adalah apa yang diperbaiki untuk saya. Di webpack 2 terlihat seperti ini:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]
Matt Browne
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.