กำหนดค่า webpack เพื่ออนุญาตการดีบักเบราว์เซอร์

131

ฉันเพิ่งเริ่มใช้ webpack และฉันกำลังแปลงเว็บแอปพลิเคชันที่มีอยู่เพื่อใช้งาน

ฉันใช้ webpack เพื่อรวมกลุ่มและย่อขนาด JS ของฉันซึ่งดีมากเมื่อนำไปใช้งานอย่างไรก็ตามสิ่งนี้ทำให้การดีบักในขณะพัฒนาเป็นเรื่องยากมาก

โดยปกติฉันจะใช้ดีบักเกอร์ในตัวของ Chrome เพื่อแก้ไขปัญหา JS (หรือ Firebug บน firefox) อย่างไรก็ตามด้วย Webpack ทุกอย่างถูกยัดไว้ในไฟล์เดียวและมันกลายเป็นเรื่องยากที่จะแก้จุดบกพร่องโดยใช้กลไกนั้น

มีวิธีเปิดและปิดการรวมกลุ่มอย่างรวดเร็วหรือไม่? หรือเปิดและปิดการลดขนาด?

ฉันได้ตรวจดูว่ามีการกำหนดค่าตัวโหลดสคริปต์หรือการตั้งค่าอื่น ๆ แต่ไม่ปรากฏขึ้น

ฉันยังไม่มีเวลาแปลงทุกอย่างให้ทำหน้าที่เหมือนโมดูลและต้องใช้ ดังนั้นฉันจึงใช้รูปแบบ require ("script! ./ file.js") สำหรับการโหลดของฉัน

javascript webpack

— จิม
แหล่งที่มา

3

คุณพบวิธีแก้ปัญหานี้หรือไม่? ฉันยังชอบใช้คอนโซล JS เพื่อดูตัวแปรที่มี ปัญหาหลักของฉันคือ webpack ซ่อนตัวแปรเหล่านี้ทั้งหมดไว้ในโมดูลดังนั้นจึงไม่สามารถเข้าถึงได้

— user1496984

2

ไม่พบวิธีแก้ปัญหาจริงๆดังนั้นเราจึงยกเลิกการใช้ webpack ไปอย่างน่าเสียดาย

— จิม

ตอนนี้ใช้อะไร ในขณะที่เขียน webpack ยังคงเป็นเครื่องมือสร้างยอดนิยมที่ฉันสามารถหาได้

— Richard

101

คุณสามารถใช้ซอร์สแมปเพื่อรักษาการแมประหว่างซอร์สโค้ดของคุณกับซอร์สโค้ดที่รวม / ย่อขนาดได้

Webpack มีตัวเลือกdevtoolเพื่อปรับปรุงการดีบักในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพียงแค่สร้างแผนที่ต้นทางของไฟล์ที่รวมไว้ให้คุณ ตัวเลือกนี้สามารถใช้ได้จากบรรทัดคำสั่งหรือใช้ในไฟล์คอนฟิกูเรชันwebpack.config.jsของคุณ

ด้านล่างนี้คุณสามารถค้นหาตัวอย่างที่สร้างขึ้นโดยใช้บรรทัดคำสั่งเพื่อสร้างไฟล์บันเดิล ( bundle.js ) พร้อมกับไฟล์แมปต้นทางที่สร้างขึ้น ( 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!';
};

หากคุณเปิดindex.htmlในเบราว์เซอร์ของคุณ (ฉันใช้ Chrome แต่ฉันคิดว่ามันได้รับการสนับสนุนในเบราว์เซอร์อื่นด้วย) คุณจะเห็นในแท็บSourcesที่คุณมีไฟล์ที่รวมอยู่ภายใต้file: // schema และไฟล์ต้นทางภายใต้webpackพิเศษ: //โครงการ

และใช่คุณสามารถเริ่มการดีบักได้ราวกับว่าคุณมีซอร์สโค้ดดั้งเดิม! ลองใส่เบรกพอยต์เป็นบรรทัดเดียวแล้วรีเฟรชหน้า

— dreyescat
แหล่งที่มา

2

bundle.map ชี้ไปที่ไฟล์ js แต่จะเกิดอะไรขึ้นถ้าไฟล์ js จริงมีแผนที่ให้พูดว่า tsx หรือ ts?

— Andrej Kovacik

4

ฉันคิดว่าการตั้งค่าโครงการของคุณโดยใช้โหมดการผลิตและการพัฒนาจะดีกว่า https://webpack.js.org/guides/production/ นอกจากนี้ยังรวมถึงวิธีการแมปโค้ดของคุณเพื่อแก้จุดบกพร่อง

devtool: 'inline-source-map'

— M-Farhan
แหล่งที่มา

3

แผนที่แหล่งที่มามีประโยชน์มากตามที่ระบุไว้แล้ว
แต่บางครั้งการเลือกแผนที่ต้นทางที่จะใช้อาจเป็นความเจ็บปวด

ความคิดเห็นเกี่ยวกับปัญหาแผนผังแหล่งที่มาของWebpack นี้อาจเป็นประโยชน์ในการเลือกแผนที่ต้นทางที่จะใช้ตามข้อกำหนด

— Abhinav Singi
แหล่งที่มา

1

ดูได้ที่นี่

มันเป็นอุปกรณ์เสริมความงามที่ลดขนาดจาวาสคริปต์ ที่ด้านล่างจะมีรายการปลั๊กอินและส่วนขยายต่างๆสำหรับเบราว์เซอร์โปรดตรวจสอบ

คุณอาจสนใจFireFox Deminifierซึ่งควรจะลดขนาดและจัดรูปแบบจาวาสคริปต์ของคุณเมื่อดึงข้อมูลจากเซิร์ฟเวอร์

ป้อนคำอธิบายภาพที่นี่

— กล้วย
แหล่งที่มา

10

การลดขนาดไม่เหมือนกับการปิดการใช้งานการย่อขนาดเนื่องจากความคิดเห็นยังคงถูกตัดหมายเลขบรรทัดไม่ตรงกันอีกต่อไปและชื่อตัวแปรจะไม่เหมือนกัน ที่ถูกกล่าวว่ามันดีขึ้นแล้วก็ไม่มีอะไร

— จิม

1

Chrome ยังมีตัวเลือกรูปแบบในดีบักเกอร์ ไม่มีข้อมูลทั้งหมดที่ซอร์สไฟล์ปกติจะทำได้ แต่เป็นการเริ่มต้นที่ดีและคุณสามารถตั้งค่าเบรกพอยต์ได้ ปุ่มที่คุณคลิกอยู่ที่ด้านล่างซ้ายของภาพหน้าจอแรกดูเหมือนว่า {}

ก่อนจัดรูปแบบ:

หลังจากจัดรูปแบบ

— Jolly1234
แหล่งที่มา