Node.js: Upload Webpack Sourcemaps
Hud Bundlers Plugins an easily integrated solution to upload your application’s sourcemaps to Hud’s server.
Sourcemaps
What is it? Sourcemaps are files that map your minified or transpiled JavaScript code back to the original source code. When utilizing a transpiler or bundler, the source code is transformed into a different format for distribution, typically consolidated into a limited number of files.
Hud uses sourcemaps to translate the running code into its original form (the source code form).
1. Install Hud Bundlers Plugin package.
npm install --save-dev @code-hud/hud-javascript-bundlers-pluginsyarn add --dev @code-hud/hud-javascript-bundlers-pluginspnpm add --save-dev @code-hud/hud-javascript-bundlers-plugins2. Enable sourcemaps upload by adding the following to your Webpack configuration.
// Add to webpack.config.js
// Enable the creation of sourcemaps
module.exports = {
devtool: 'source-map',
}
// Integrate Hud’s Webpack plugin
const hud = require('@code-hud/hud-javascript-bundlers-plugins/webpack');
plugins:[
...
hud.hudWebpackPlugin({ accessToken:'XXX'}),
]// Add to next.config.js
// Enable the creation of sourcemaps
module.exports = {
productionBrowserSourceMaps: true,
}
// Integrate Hud’s Webpack plugin
module.exports = {
webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) =>
{
config.plugins.push(hud.hudWebpackPlugin({ accessToken:'XXX'}));
return config;
},
}// Add to webpack.config.js
// Enable the creation of sourcemaps
new NxWebpackPlugin({
sourceMap: true,
}
// Integrate Hud’s Webpack plugin
const hud = require('@code-hud/hud-javascript-bundlers-plugins/webpack');
plugins:[
...
hud.hudWebpackPlugin({ accessToken:'XXX'}),
]If you have any questions, contact us through your organization's Hud Slack channel or email us at [email protected].
Updated 6 days ago
What’s Next