Query asked by user
There are two ways to set up sourcemaps: having them hosted on the site and referenced in the bundled files or uploading them directly to a service like sentry. I’m trying to accomplish the latter. The problem is that there seems to be no way to generate sourcemaps using angular cli without having the filepath written to the bundled files.
My first thought was to have two builds ‚Äì one with sourcemaps generate and one without. I would then just deploy the build without sourcemaps and upload the build with them to sentry. That doesn’t work because the bundle filenames are different (angular cli uses the file hash as the filename for cache busting and when you generate sourcemaps it adds the path to the .map file as a comment at the end causing a change in hash and filename).
My other option would be to build with sourcemaps, upload them to sentry, and then delete the map files before deploying the site. The problem there though is that the bundle files still contain a reference to a now non-existent map file. That shouldn’t be an issue in and of itself but it might raise an issue with extensions or browsers down the line and just seems like a hackish solution.
How would you implementing something like this into the build process?
Answer we found from sources
The official recommendation of Sentry is to upload source maps via sentry-webpack-plugin or sentry-cli.
CLI docs don’t mention the issue with publishing source maps, but many ask about this in regards to the plugin: 1, 2, 3, 4, 5.
The community seems settled on the solution to remove source maps after the upload. This can be achieved in different ways as discussed in the issues above such as
1, Simply rm -rf dist/**/*.map
2, Various webpack plugins, most notably clean-webpack-plugin
3, A custom webpack plugin such as this one:
webpack.config.js
const glob = require("glob");
const { removeSync } = require("fs-extra");
...
plugins: [
...
{
apply: compiler =>
compiler.hooks.done.tap("CleanJsMapPlugin", () => {
glob.sync(".webpack/**/*.js.map").forEach(f => removeSync(f));
}),
cb();
},
...
]
Answered By – thisismydesign
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0