Webpack ts-loader : change tsconfig filename

Here is how to specify configFile (formerly configFileName, as Frank notes), as of December 2017 (Webpack 3.10.0).

Webpack config

Note: Since version 2, Webpack has been using module.rules rather than module.loaders, and has deprecated use of query params in favour of an options object.

module.exports = {
    entry:  {
        "./build/bundle" : "./src/startup/Entry.ts"
    },
    output: {
        filename: '[name].js',
        libraryTarget: 'this'
    },
    devtool: 'source-map',
    resolve: {
        modules: [".", "node_modules"],
        extensions: [".js", ".webpack.js", ".web.js", ".d.ts", ".ts", ".tsx"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: [/node_modules/],
                loader: "ts-loader",
                options: {
                    configFile: "webpack_configs/tsconfig.webpack.json"
                }
            }
        ]
    },
    plugins: []
};

Directory structure

The root of my directory structure looks like:

webpack.config.js
webpack_configs/tsconfig.webpack.json
tsconfig.json
package.json
src/*
test/*
node_modules/*
build/*

... Where * indicates multiple files.

Typescript config

tsconfig.webpack.json itself just extends my generic tsconfig.json by excluding the test folder:

{
    "extends": "../tsconfig",
     "exclude": [
       "node_modules",
       "test"
     ]
}

... But you needn't have two webpack configs to benefit from the configFile setting; you could simply use it to target your singular tsconfig.json from a custom location.

In Webpack 4 you need to specify the options into a use object:

use: [{
    loader: 'ts-loader',
    options: {
        configFile: "tsconfig.webpack.json"
    }
}]

Complete Webpack config:

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'src') + '/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'your-library-name.js',
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                        configFile: "tsconfig.webpack.json"
                    }
                }],
                exclude: /node_modules/,
            }
        ]
    },
    mode: 'development',
    resolve: {
        extensions: ['.js', '.ts']
    },
    devtool: false
};