Generate bundle TypeScript definition file with webpack

Question

I'm currently using "gulp" to generate the definition file of my bundle like this:

dtsGenerator.default({
    name: 'ngFramework',
    project: './',
    out: './Typings/raw/index.d.ts'
});

However, I'm migrating to webpack and I'd like to find a way to do the same. I tried the "declaration" flag in the "tsconfig" but it just creates the definition file for each and every single "ts" file which is not what I want (I want the definition file of the bundle).

I tried "dtsbundler-webpack-plugin" but I couldn't make it work as expected. Without the "declaration" flag of "tsconfig", the generated file is "0 bytes" and with it, I have a lot of errors.

Answer 1

You should use dts-bundle with WebPack to generate bundle. You should leave the declaration flag to true and try the following:

General

var path = require('path');
var rootDir = path.resolve(__dirname);

Write simple plugin

function DtsBundlePlugin() {}
DtsBundlePlugin.prototype.apply = function (compiler) {
    compiler.plugin('done', function () {
        var dts = require('dts-bundle');

        dts.bundle({
            name: 'your-lib-name',
            main: rootDir + '/build/types/**/*.d.ts',
            out: rootDir + '/build/index.d.ts',
            removeSource: true,
            outputAsModuleFolder: true 
        });
    });
};

More information can be found in this blog post by Vladimir Tolstikov.

Register

plugins: [
    new DtsBundlePlugin()
]

I have managed to bundle the typings but I had some issues with bundled code that are related to my source code.