Webpack TypeScript Declaration Bundler

1.0.2 · maintenance · verified Tue Apr 21

types-webpack-bundler is a specialized webpack plugin designed to combine multiple TypeScript declaration files (`.d.ts`) generated by `ts-loader` (or similar tools) into a single, consolidated declaration file. Unlike standard declaration bundling which often produces external modules, this plugin recomposes declarations to mimic an 'internal module' structure, exposing classes and interfaces to a global-like module space. This is a fork of an unmaintained original library, updated to support Webpack 5. Its primary use case is highly niche: allowing external modules to behave like internal modules for specific scenarios, such as mapping prefixed URIs to module paths. The current stable version is 1.0.2. It does not have a stated regular release cadence and is described as an 'experimental setup' by its author, suggesting infrequent updates unless a specific need arises.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'compilation')
```
cause The plugin is likely being initialized incorrectly or in an incompatible Webpack version/environment where the expected Webpack plugin API shape is not present.

fix Ensure you are using Webpack 5 as a peer dependency. Double-check your `webpack.config.js` to confirm the plugin is instantiated correctly: `new DeclarationBundlerPlugin({...})` within the `plugins` array.
```
Error: ENOENT: no such file or directory, open '.../bundle.d.ts'
```
cause The output directory specified for the bundled declaration file (`out` option) does not exist, and the plugin might not automatically create it.

fix Ensure the directory specified in the `out` option (e.g., `./builds/`) exists before webpack runs, or configure webpack's output path to ensure it creates necessary directories. You might need to use a tool like `fs.mkdirSync` in a pre-build script or rely on webpack's output directory creation.

Warnings

gotcha This library is explicitly described as an 'experimental setup' and is intended for a very specific and rare use case. It allows external modules to mimic internal modules by re-composing declaration files into a global-like scope. For most TypeScript projects using modern module systems (ESM or CommonJS), this approach is generally not recommended or necessary.
Fix: Evaluate if your project truly requires this niche functionality. In most cases, standard `tsc` declaration generation and bundling tools (like `rollup-plugin-dts` or `webpack`'s built-in capabilities for modules) are more appropriate and less 'experimental'.
gotcha The plugin expects separate declaration files to be generated by a loader (e.g., `ts-loader` with `declaration: true` in `tsconfig.json`). If the loader is not configured to emit these files, the bundler will have no input and will likely fail or produce an empty output.
Fix: Ensure your TypeScript configuration (`tsconfig.json`) includes `"declaration": true` and your `ts-loader` (or equivalent) setup is configured to process and emit declaration files. Verify that individual `.d.ts` files are being generated in your build output before the bundler runs.
breaking This is a fork of an unmaintained original library. While it supports Webpack 5, it implies that future Webpack major versions might not be immediately supported without further updates to this project.
Fix: Keep an eye on the project's GitHub repository for updates if you plan to upgrade Webpack beyond v5. Be prepared for potential compatibility issues with future Webpack releases or consider migrating to a more actively maintained declaration bundling solution if your use case evolves.

Install

npm install types-webpack-bundler npm
yarn add types-webpack-bundler yarn
pnpm add types-webpack-bundler pnpm

Imports

DeclarationBundlerPlugin
wrong:
```
const DeclarationBundlerPlugin = require('types-webpack-bundler').default;
```
correct:
```
import DeclarationBundlerPlugin from 'types-webpack-bundler';
```
While the README shows `require('types-webpack-bundler')`, the package exports a default for ESM compatibility. For TypeScript, direct import is preferred.
DeclarationBundlerPlugin
```
const DeclarationBundlerPlugin = require('types-webpack-bundler');
```
This is the CommonJS `require` syntax explicitly shown in the webpack.config.js example for Node.js environments.

Quickstart

This configuration demonstrates how to integrate `types-webpack-bundler` into a webpack setup with `ts-loader` to generate a bundled declaration file. It shows the plugin options `moduleName` and `out` in action.

import * as path from 'path';
import DeclarationBundlerPlugin from 'types-webpack-bundler';

export default {
    entry: './src/init.ts',
    output: {
        filename: './builds/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                loader: 'ts-loader',
                options: {
                    compilerOptions: { declaration: true, outDir: './builds' } // ts-loader must generate declarations
                }
            }
        ]
    },
    plugins: [
        new DeclarationBundlerPlugin({
            moduleName:'some.path.moduleName',
            out:'./builds/bundle.d.ts',
            excludedReferences: []
        })
    ],
    mode: 'development' // or 'production'
};

view raw JSON →