Webpack Delete Sourcemaps Plugin

1.3.1 · active · verified Sun Apr 19

The `webpack-delete-sourcemaps-plugin` is a Webpack plugin designed to automatically remove sourcemap files at the conclusion of a build process. This is particularly useful for workflows involving services like Sentry, where sourcemaps are uploaded for error tracking but should not be exposed on production servers due to security risks (source code disclosure). The current stable version is `1.3.1`, with recent updates indicating active maintenance, including improvements for Webpack 4 compatibility since `v1.3.0`. A key differentiator is its explicit handling of the `devtool: 'hidden-source-map'` configuration to prevent browsers from requesting non-existent sourcemaps, and providing tailored guidance for integration with Next.js and Sentry.

Common errors

```
Cannot find module 'webpack-delete-sourcemaps-plugin'
```
cause The package was not installed or is not resolvable in the current environment.

fix Run `npm install webpack-delete-sourcemaps-plugin --save-dev` or `yarn add webpack-delete-sourcemaps-plugin --dev`.
```
GET http://localhost:3000/static/js/main.js.map 404 (Not Found)
```
cause Sourcemap files were deleted, but the bundled JavaScript still contains references, causing the browser to attempt to load them.

fix Ensure `devtool: 'hidden-source-map'` is set in your Webpack configuration. The plugin helps manage this, especially for Next.js builds.
```
TypeError: DeleteSourceMapsPlugin is not a constructor
```
cause Incorrect import statement; attempting to call the module as a default export or using incorrect destructuring.

fix Use a named import: `import { DeleteSourceMapsPlugin } from 'webpack-delete-sourcemaps-plugin';` or `const { DeleteSourceMapsPlugin } = require('webpack-delete-sourcemaps-plugin');`

Warnings

gotcha Exposing sourcemap files on production servers can be a security risk, allowing attackers to view original source code. This plugin addresses that by enabling post-build deletion.
Fix: Ensure `webpack-delete-sourcemaps-plugin` is correctly configured in your production Webpack build to delete sourcemaps after any upload steps (e.g., to Sentry).
gotcha After deleting sourcemaps, browsers might still attempt to fetch them if references remain in the bundled JavaScript files, leading to 404 errors. The plugin helps address this, but `devtool: 'hidden-source-map'` is crucial.
Fix: Set `devtool: 'hidden-source-map'` in your Webpack configuration. For Next.js, the plugin can handle overriding `devtool` for client builds, even when `sentry-webpack-plugin` is used.
breaking Prior to version 1.3.0, the plugin explicitly stated compatibility only with Webpack 5. While v1.3.0 introduced optional compatibility with Webpack 4, using older versions of the plugin with Webpack 4 or earlier will likely lead to errors.
Fix: Upgrade to `webpack-delete-sourcemaps-plugin@1.3.0` or newer if you require Webpack 4 support. Ensure your Webpack setup matches the plugin's stated compatibility.
gotcha When integrating with Next.js, it's common to differentiate between server-side and client-side builds. The `isServer` option is vital to ensure server sourcemaps are handled (often kept) correctly.
Fix: Pass the `isServer` flag from your `next.config.js` webpack callback to the plugin, and consider `keepServerSourcemaps: true` if you need them for server-side debugging or error reporting.

Install

npm install webpack-delete-sourcemaps-plugin npm
yarn add webpack-delete-sourcemaps-plugin yarn
pnpm add webpack-delete-sourcemaps-plugin pnpm

Imports

DeleteSourceMapsPlugin

wrong:

const DeleteSourceMapsPlugin = require('webpack-delete-sourcemaps-plugin');

correct:

import { DeleteSourceMapsPlugin } from 'webpack-delete-sourcemaps-plugin';

While CommonJS `require` works, ESM `import` is preferred for modern projects and TypeScript.

DeleteSourceMapsPlugin as Plugin
```
import { DeleteSourceMapsPlugin as Plugin } from 'webpack-delete-sourcemaps-plugin';
```
Aliasing the import can help avoid naming conflicts, especially if another plugin uses a similar name.

Quickstart

Demonstrates basic Webpack integration and advanced usage within a Next.js configuration, emphasizing `hidden-source-map` and server-side sourcemap retention.

import { DeleteSourceMapsPlugin } from 'webpack-delete-sourcemaps-plugin';
import type { Configuration } from 'webpack';

interface NextWebpackConfigOptions {
  isServer: boolean;
  dev: boolean;
  // ... other Next.js specific options
}

// Basic Webpack Configuration Example
const webpackConfig: Configuration = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  devtool: 'hidden-source-map', // Recommended to prevent 404s for deleted sourcemaps
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
    clean: true
  },
  plugins: [
    new DeleteSourceMapsPlugin({
      // Optional: keepServerSourcemaps: true
      // Optional: silent: true
    })
  ]
};

// Example with Next.js (in next.config.js)
const nextConfigWebpack = (config: Configuration, options: NextWebpackConfigOptions) => {
  // For Next.js, 'hidden-source-map' is often managed by sentry-webpack-plugin
  // This plugin can override it for client builds if necessary.
  config.plugins?.push(
    new DeleteSourceMapsPlugin({
      isServer: options.isServer,
      keepServerSourcemaps: true, // Typically keep sourcemaps for server builds in Next.js
      silent: process.env.CI === 'true' // Reduce console output in CI/CD
    })
  );
  return config;
};

// In a real setup, you'd export these configs appropriately.
// For demonstration purposes:
console.log('Webpack configuration for deletion plugin:', webpackConfig);
// console.log('Next.js webpack config callback:', nextConfigWebpack);

view raw JSON →