Webpack sourcemaps khó hiểu (các tệp trùng lặp)

Question

Tôi quyết định thử dùng WebPack trên một dự án mới mà tôi đang quay vòng hôm nay và tôi nhận được hành vi thực sự kỳ lạ từ các bản sourcemaps. Tôi không thể tìm thấy bất cứ điều gì về nó trong tài liệu, cũng không phải tôi có thể tìm thấy bất cứ ai khác có vấn đề này khi skimming StackOverflow.

Tôi hiện đang xem ứng dụng HelloWorld được sản xuất bởi Vue-CLI's WebPack template - không có thay đổi nào được thực hiện đối với mã, môi trường xây dựng hoặc bất kỳ thứ gì.

Tôi đã cài đặt tất cả mọi thứ và chạy nó như vậy:

vue init webpack test && cd test && npm install && npm run dev 

Nhìn vào sourcemaps của tôi, tôi thấy như sau:

Đây là một mớ hỗn độn nóng. Tại sao có ba phiên bản HelloWorld.vue và App.vue? Tệ hơn nữa, mỗi phiên bản có một phiên bản hơi khác một chút và không có phiên bản nào phù hợp với nguồn gốc. Các HellowWorld.vue ngồi trong thư mục gốc hiện phù hợp với nguồn gốc, nhưng những gì nó làm xuống đó thay vì trong thư mục ./src/components? Cuối cùng, tại sao không có một số thứ tư App.vue có nguồn gốc cho nó?

Theo như tôi có thể nói điều này có thể có liên quan đến trình tải WebPack. Tuy nhiên, tôi chưa bao giờ nhận được các loại vấn đề này với bất kỳ trình bundler nào khác. Dưới đây là một ví dụ về các bước chính xác tương tự sử dụng template Browserify Vue-CLI:

Không webpack:// lược đồ, chỉ có một bản sao của tất cả các tập tin, các tập tin thực sự chứa mã nguồn gốc (loại quan trọng đối với bản đồ nguồn), không có bất ngờ (webpack)/buildin hoặc (webpack)-hot-middleware, không có . thư mục con, .... chỉ là mã nguồn.

Answer 1

Tôi chưa từng làm việc với Vue như vậy có thể không thực sự mô tả cách chính xác điều này xảy ra nhưng có vẻ như có liên quan đến Vue Loader. Nhìn vào tài liệu tôi đã không thực sự tìm thấy bất cứ điều gì làm rõ lý do tại sao nó sẽ tạo ra ba tập tin khác nhau cho một thành phần. Nhưng có vẻ hợp lý khi xem xét rằng tệp .vue có thể chứa ba loại khối ngôn ngữ cấp cao nhất: <template>, <script> và <style>.

Ngoài ra, hãy xem hai trong số các tệp đó bạn thấy một nhận xét ở cuối mỗi tệp cho thấy tệp đã được sửa đổi theo cách nào đó bởi trình tải Vue.Hoặc

////////////////// 
// WEBPACK FOOTER 
// ./node_modules/vue-loader/lib/template-compiler 

hoặc

////////////////// 
// WEBPACK FOOTER 
// ./node_modules/vue-style-loader!./node_modules/css-loader 

Các tập tin thứ ba này là khác nhau nhưng nó vẫn không có mã nhận dạng nó như được sửa đổi bởi Vue nạp. Dưới đây là một số mã mà

function injectStyle (ssrContext) { 
    if (disposed) return 
    require("!!vue-style-loader...") 
} 
/* script */ 
import __vue_script__ from "!!babel-loader!../../node_modules/vue-loader/..." 
/* template */ 
import __vue_template__ from "!!../../node_modules/vue-loader/..." 
/* styles */ 
var __vue_styles__ = injectStyle 

Các document cũng nói điều này:

vue-loader là một bộ nạp cho Webpack mà có thể chuyển đổi Vue linh kiện bằng văn bản theo định dạng sau thành một đồng bằng mô-đun JavaScript:

Điều này giải thích lý do tại sao bạn có thể không thấy cùng loại hành vi với các trình chặn khác.

Hiện tại, đây có thể không phải là câu trả lời bạn đang tìm kiếm nhưng chỉ muốn chia sẻ những gì tôi đã tìm thấy.

Answer 2

Đây thực sự là một tính năng của webpack.

gói web có HMR (Nạp ​​lại mô-đun nóng). Nếu bạn nhìn vào tab mạng của mình, hãy tiếp tục và cập nhật tệp HelloWorld.vue của bạn. Bạn sẽ thấy một đoạn js đi qua cũng như một tệp kê khai JSON đã cập nhật. Cả hai điều này sẽ có một băm duy nhất ở cuối mỗi lần bạn thực hiện thay đổi cho ứng dụng. Nó thực hiện điều này để trình duyệt không phải thực hiện tải lại đầy đủ.

Đối với một lời giải thích tốt hơn điều này tôi rất muốn khuyên bạn nên đọc qua https://webpack.js.org/concepts/hot-module-replacement/