dts-bundle-webpack-wrapper v1.0.3

dts-bundle Webpack wrapper

Webpack wrapper for dts-bundle.

Testing with webpack 3.8.1, ts-loader 3.1.1, dts-bundle 0.7.3.

####Install:

npm i --save-dev dts-bundle-webpack-wrapper

####Configuration: tsconfig.json:

{    
    "compilerOptions": {
        ...    
        "outDir": "./youBundleFolder/",
        ...
        "declaration": true,                 <-- IMPORTANT! REQUIRED!
        "declarationDir": "./youDtsFolder/", <-- IMPORTANT! REQUIRED!
        ...
    }
}

webpack.config.js:

const DtsBundleWebpackWrapper = require('dts-bundle-webpack-wrapper');
//...
module.exports = {
    
    /**
    * @type {string} entry Entry point
    */
    entry: `./src/youEntryPointFile.ts`,  

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /^\.d.ts$/,
                use: 'ignore-loader'
            }
        ]
    },

    output: {
        /**
        * @type {string} path. 'youBundleFolder' from tsconfig.json 
        */
        path: path.resolve(__dirname, 'youBundleFolder'),
        
        /**
        * @type {string} filename. You bundle name.
        */
        filename: `youBundleName.js`,     
        libraryTarget: 'umd',
        /**
        * @type {string} library. You library name.
        */
        library: 'youLibraryName'       
    },
    
    plugins: [
        // To prevent infinity loop in webpack watch
        new webpack.WatchIgnorePlugin([
                                          /\.js$/,
                                          /\.d\.ts$/
                                      ]),                         
        // DtsBundlePlugin                              
        new DtsBundlePlugin({
                                /**
                                * @type {string} typingsDirName.  Required!
                                * 'youDtsFolder' from tsconfig.json 
                                */
                                typingsDirName: 'youDtsFolder',
                                
                                /**
                                * @type{Object} [dts] dts-bundle options.
                                * 
                                * ========= !!! OPTIONAL !!! =================
                                * @see https://github.com/TypeStrong/dts-bundle
                                * 
                                */
                                dts: {
                                    //... 
                                }

                            }),
    ],
};

####Example: Project start:

markdown-magic-directory-tree/
├── dist
├── src
│    ├── module1
│    │     ├── mod01.ts
│    │     └── ...
│    ├── module2
│    │     ├── mod02.ts
│    │     └── ...
│    ├── ...
│    │     
│    └── main.ts
├── ...
├── package.json
├── tsconfig.json
└── webpack.config.js

tsconfig.json:

{    
    "compilerOptions": {
        ...    
        "outDir": "./dist/",
        ...
        "declaration": true,                 
        "declarationDir": "./dts/", 
        ...
    }
}

webpack.config.js:

const DtsBundleWebpackWrapper = require('dts-bundle-webpack-wrapper');
//...
module.exports = {
    
    entry: `./src/main.ts`,  
//...
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: `bundle.js`,     
        libraryTarget: 'umd',
        library: 'myBundle'       
    },
    
    plugins: [
        // ...                            
        new DtsBundlePlugin({
                                typingsDirName: 'dts',
                            }),
    ],
};

package.json:

{    
    ...
    "main": "dist/bundle.js",
    "types": "dist/bundle.d.ts",
    ...
}

Project result:

markdown-magic-directory-tree/
├── dist
│    ├── bundle.d.ts
│    ├── bundle.js
├── src
│    ├── module1
│    │     ├── mod01.ts
│    │     └── ...
│    ├── module2
│    │     ├── mod02.ts
│    │     └── ...
│    ├── ...
│    │     
│    └── main.ts
├── ...
├── package.json
├── tsconfig.json
└── webpack.config.js