Tôi đã tạo một repo Github có tất cả các source code liên quan đến câu hỏi này. Tôi có thể tải build/index.html
trong trình duyệt sau khi chạy npm install
. Tuy nhiên, khi tôi xem tab nguồn trong Chrome, tôi không thấy bản đồ nguồn được liên kết với các tệp .tsx
.Thiếu sourcemaps trong Typescript + dự án Webpack
Dưới đây là một ảnh chụp màn hình của những gì tôi thấy:
Tôi đã thêm sourceMap: true
trong tsconfig.json của tôi cũng như debug: true
và devtool: "source-map"
trong webpack.config.json tôi. Bất kỳ suy nghĩ về những gì tôi đang thiếu ở đây?
EDIT:
Đây có thể là một câu hỏi ngớ ngẩn, nhưng làm bạn phải sử dụng webpack-dev-server
để xem các sourcemaps?
Tôi không thấy vấn đề ở đây, tôi đã sao chép repo của bạn: 'npm install && typings install && npm run dev' -> mở chrome - > F12 -> điều hướng đến localhost: 8080/webpack-dev-server (hoặc localhost: 8080/build - cả hai hoạt động) và tôi thấy nhật ký từ 'ReactDOM.js: 66' và' app.tsx: 14', do đó, sourceMaps dường như đang hoạt động - có thể vấn đề của bạn là FIRST mở công cụ dev trước khi nhập url (hoặc nhấn F5 sau khi mở các công cụ dev) - nhưng cấu hình của bạn dường như hoạt động. - Chạy Node v4.2.6 (> = 4.xx là cần thiết cho Webpack tôi nghĩ) – olsn
@olsn khi tôi đặt câu hỏi này lần đầu tiên, tôi đã tự hỏi liệu tôi có thể xem bản đồ nguồn khi tôi chỉ sử dụng webpack và không phải webpack- dev-server. Có vẻ như để xem bản đồ nguồn, tôi sẽ cần sử dụng webpack-dev-server, phải không? – wmock
không, bản đồ nguồn sẽ được tạo ra với cả 'webpack' cũng như 'webpack-dev-server' - vì nó về cơ bản là giống nhau, với việc bổ sung' dev-server' tự động phục vụ thứ mà ' gói webpack'. - Vì vậy, bạn có thể sử dụng 'npm run build' hoặc' npm run dev' và cả hai sẽ tạo ra một bản đồ nguồn. – olsn