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-plugins
yarn add --dev @code-hud/hud-javascript-bundlers-plugins
pnpm add --save-dev @code-hud/hud-javascript-bundlers-plugins

2. 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].