Làm thế nào để tải bản đồ nguồn thư viện bằng cách sử dụng webpack?

Question

Tôi đang xây dựng hai dự án với webpack; một là thư viện cho người kia.

Có thể tiêu thụ các sourcemaps từ dự án thư viện của tôi khi xây dựng dự án trình bao bọc của tôi không? Tôi muốn có khả năng gỡ lỗi mã thư viện của tôi khỏi giao diện người dùng của tôi.

Công trình xây dựng của tôi hoạt động chính xác khi thư viện được tích hợp. Vấn đề duy nhất là các bản đồ nguồn. JavaScript tôi thấy trong trình gỡ rối trình duyệt bị uglified, bởi vì sourcemaps không có sẵn.

Snippet của cấu trúc dự án của tôi:

+-- my-ui/ 
    +-- dist/ 
     +-- my-ui.js 
     +-- my-ui.js.map 
    +-- node_modules/ 
     +-- my-lib/ 
      +-- dist/ 
       +-- bundle.js 
       +-- bundle.js.map 

Snippet từ webpack.config.js:

module.exports = { 
    entry: './src/js/main.jsx', 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: 'my-ui.js', 
     library: 'my-ui', 
     libraryTarget: 'umd' 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 
      {test: /\.jsx?$/, loader: 'babel', include: path.join(__dirname, 'src')} 
     ] 
    }, 
    plugins: [ 
     new Clean('dist'), 
     new HtmlWebpackPlugin({ 
      template: 'src/index.html', 
      inject: true 
     }) 
    ] 
}; 

Answer 1

cuối cùng tôi đã tìm ra vấn đề của tôi ...

Nhờ @BinaryMuse for the tip trên source-map-loader . Đây thực sự là con đường đúng để đi, mặc dù ban đầu nó không làm việc cho tôi.

Điều cuối cùng tôi nhận ra là tôi cần bật source-map-loader cho gói web trong cả "my-lib" và "my-ui" của mình. Nếu không có source-map-loader trong cấu hình gói webpack "my-lib", thì có lỗi source-map-loader bên trong lỗi "my-ui" (với thông báo cảnh báo đáng buồn) vì nó không thể định vị bản đồ nguồn cho các phụ thuộc chuyển tiếp của "my-lib". Rõ ràng các bản đồ nguồn quá tốt đến nỗi source-map-loader có thể nhìn trộm tất cả các khía cạnh của cây phụ thuộc.

Ngoài ra lưu ý, tôi gặp sự cố khi sử dụng source-map-loader kết hợp với react-hot-loader. Xem, react-hot-loader không bao gồm bản đồ nguồn. Khi source-map-loader cố gắng tìm chúng (vì nó chỉ quét tất cả mọi thứ), nó không thể và hủy bỏ mọi thứ.

Cuối cùng, tôi muốn source-map-loader có khả năng chịu lỗi hơn, nhưng khi được thiết lập chính xác, nó sẽ hoạt động!

devtool: 'source-map', 
module: { 
    preLoaders: [ 
     {test: /\.jsx?$/, loader: 'eslint', exclude: /node_modules/}, 
     {test: /\.jsx?$/, loader: 'source-map', exclude: /react-hot-loader/} 
    ], 
    loaders: [ 
     {test: /\.jsx?$/, loader: 'raect-hot!babel', exclude: /node_modules/} 
    ] 
} 

Answer 2

Bạn sẽ có thể sử dụng bất kỳ eval tùy chọn đồ nguồn mà Webpack cung cấp.

Thực sự chỉ là số tiền để đặt tùy chọn devtool đúng trong số webpack.config.js của bạn cho dự án my-lib.

devtool: 'eval', 

eval và eval-source-maps cả hai đều hoạt động.

Xem Webpack source map documentation cho các tùy chọn khác nhau.