Làm thế nào để thay đổi 'sourceMappingURL` bằng cách sử dụng webpack

Question

sản xuất cấu hình webpack của tôi là:

{ 
    output: { 
    publicPath: "https://cdn.example.com/sub-directory/", 
    filename: '[name]-[chunkhash].min.js' 
    }, 

    devtool: 'source-map', 

    plugins: [ 
    new webpack.optimize.UglifyJsPlugin() 
    ] 
} 

Bây giờ tôi có hai tập tin app-12345.min.js và app-12345.min.js.map.

Tôi cũng đã tự động tạo URL CDN https://cdn.example.com/sub-directory/app-12345.min.js cho tập lệnh chính.

Nhưng sourceMappingURL vẫn là đường dẫn tương đối //# sourceMappingURL=app-12345.min.js.map và không thể truy cập trực tiếp trong trình duyệt.

Câu hỏi của tôi là cách tôi có thể đặt sourceMappingURL làm đường dẫn được tạo tự động tuyệt đối?

Answer 1

Cuối cùng đây là có thể trong Webpack 3 sử dụng hướng dẫn từ phản ứng của @omj và sau cấu hình

devtool: 'hidden-source-map', // SourceMap without reference in original file 

    new webpack.SourceMapDevToolPlugin({ 
    filename: '[file].map', 
    append: `\n//# sourceMappingURL=${path}[url]` 
    }) 

---

Cập nhật (Webpack v3.10.0):

Một tùy chọn mới đã được thêm từ Webpack v3.10.0. Các tùy chọn gọi publicPath:

new webpack.SourceMapDevToolPlugin({ 
    filename: '[file].map', 
    publicPath: 'https://example.com/dev/' 
}); 

Answer 2

Plugin SourceMapDevToolPlugin là một tùy chọn.

new webpack.SourceMapDevToolPlugin({ 
    filename: '[file].map', 
    append: '\n//# sourceMappingURL=' + path + '[url]' 
}); 

Answer 3

Với Webpack 2 bạn có thể sử dụng ẩn-source-bản đồ cho devtool và banner-webpack-plugin từ https://github.com/lcxfs1991/banner-webpack-plugin và thiết lập một cái gì đó như thế này:

new banner({ 
    chunks: { 
     "main": { 
      afterContent: "\n//# sourceMappingURL=custom/url/to/map\n" 
     } 
    } 
})