Konfigurasikan webpack untuk memungkinkan debugging browser

130

Saya baru mengenal webpack dan saya mengonversi aplikasi web yang ada untuk menggunakannya.

Saya menggunakan webpack untuk bundel dan memperkecil JS saya yang bagus saat digunakan, namun ini membuatnya sangat sulit untuk di-debug saat sedang dalam pengembangan.

Biasanya saya menggunakan debugger bawaan Chrome untuk men-debug masalah JS. (Atau Firebug di firefox). Namun dengan webpack semuanya diisi dalam satu file dan itu menjadi menantang untuk debug menggunakan mekanisme itu.

Apakah ada cara untuk dengan cepat menghidupkan dan mematikan bundeling? atau menyalakan dan mematikan minifying?

Saya telah melihat untuk melihat apakah ada beberapa konfigurasi skrip loader atau pengaturan lain tetapi tidak muncul terlalu awal.

Saya belum punya waktu untuk mengubah segala sesuatu untuk bertindak seperti modul dan perlu menggunakan. Jadi saya hanya menggunakan pola require ("script! ./ file.js") untuk memuat saya.

javascript webpack Jim
sumber
3
Apakah Anda akhirnya menemukan solusi untuk masalah ini? Saya juga lebih suka menggunakan konsol JS untuk melihat variabel yang tersedia. Masalah utama saya adalah bahwa webpack menyembunyikan semua variabel ini di dalam modul, sehingga mereka menjadi tidak dapat diakses
user1496984
2
Tidak pernah benar-benar menemukan solusi sehingga kami sayangnya dibatalkan menggunakan webpack.
Jim
Apa yang kamu gunakan sekarang? Pada saat menulis webpack masih tampak seperti alat build paling populer yang dapat saya temukan.
Richard

Jawaban:

100

Anda dapat menggunakan peta sumber untuk melestarikan pemetaan antara kode sumber Anda dan yang dibundel / diperkecil.

Webpack menyediakan opsi devtool untuk meningkatkan debugging di alat pengembang hanya membuat peta sumber dari file yang dibundel untuk Anda. Opsi ini dapat digunakan dari baris perintah atau digunakan dalam file konfigurasi webpack.config.js Anda .

Di bawah ini Anda dapat menemukan contoh yang dibuat menggunakan baris perintah untuk menghasilkan file yang dibundel ( bundle.js ) bersama dengan file peta sumber yang dihasilkan ( bundle.js.map ).

$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.74 kB       0  [emitted]  main
bundle.js.map  1.89 kB       0  [emitted]  main
   [0] ./entry.js 85 bytes {0} [built]
   [1] ./hello.js 59 bytes {0} [built]

index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

entry.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

hello.js

module.exports = function () {
  return 'Hello world!';
};

Jika Anda membuka index.html di browser Anda (saya menggunakan Chrome tapi saya pikir itu juga didukung di browser lain), Anda akan melihat di tab Sumber bahwa Anda memiliki file yang dibundel di bawah file: // skema dan file sumber di bawah paket web khusus : // skema.

debug dengan peta sumber

Dan ya, Anda dapat mulai men-debug seolah-olah Anda memiliki kode sumber asli! Coba letakkan breakpoint dalam satu baris dan segarkan halaman.

breakpoint dengan peta sumber

dreyescat
sumber
2
bundle.map menunjuk ke file js tetapi bagaimana jika file js yang sebenarnya juga memiliki peta untuk katakanlah tsx atau ts?
Andrej Kovacik
4

Saya pikir lebih baik untuk mengatur proyek Anda menggunakan mode produksi dan pengembangan https://webpack.js.org/guides/production/ Ini juga termasuk cara memetakan kode Anda untuk debug

devtool: 'inline-source-map'

m-farhan
sumber
3

Sumber peta sangat berguna seperti yang telah ditunjukkan.
Tetapi kadang-kadang memilih sumber peta mana yang akan digunakan bisa menyebalkan.

Komentar ini pada salah satu masalah peta sumber Webpack mungkin bermanfaat untuk memilih peta sumber mana yang akan digunakan berdasarkan persyaratan.

Abhinav Singi
sumber
1

Lihat di sini

itu adalah beautifier yang mendeminifikasi javascript. di bagian bawah, ia memiliki daftar berbagai plugin dan ekstensi untuk browser, periksa.

Anda mungkin tertarik dengan FireFox Deminifier , yang seharusnya meruntuhkan dan gaya javascript Anda ketika diambil dari server.

masukkan deskripsi gambar di sini

pisang
sumber
10
deminifikasi tidak sama dengan menonaktifkan minifying karena komentar masih dilucuti, nomor baris tidak lagi cocok, dan nama variabel tidak sama. Yang dikatakan itu lebih baik daripada tidak sama sekali.
Jim
1

Chrome juga memiliki opsi format di debugger. Itu tidak memiliki semua informasi file sumber normal akan tetapi ini adalah awal yang baik, Anda juga dapat mengatur breakpoints. Tombol yang Anda klik ada di kiri bawah tangkapan layar pertama, seperti {}.

Sebelum memformat: masukkan deskripsi gambar di sini

Setelah memformat.

masukkan deskripsi gambar di sini

Jolly1234
sumber