Webpack ts-loader : change tsconfig filename

Question

I have 2 tsconfigs, one for my dev build and one for my prod build.
I choose the tsconfig with the -p flag :
tsc -p dev.tsconfig.json

Ts-loader is looking for a tsconfig.json file. How can I specify another filename with the ts-loader?

module.exports = {
    entry : __dirname + "/src/app/main.ts",
    output : {
        path : __dirname + "/dist",
        filename : "bundle.js"
    },
   resolve : {
     extensions : ["", ".webpack.js", ".web.js", ".js", ".ts"]
   },
   module: {
        loaders: [
            { test: /\.ts?$/, loader: "ts" }
        ]
    }
};

Celka

Answer 1

Update (Webpack 4): As noted in the comments, the syntax has changed as referenced in the answer below.

---

Webpack enables us to add custom options for each loader. All ts-loader configuration properties are described here.

configFileName is the property you are looking for. It should be like this.

module.exports = {
    entry : __dirname + "/src/app/main.ts",
    output : {
        path : __dirname + "/dist",
        filename : "bundle.js"
    },
    resolve : {
        extensions : ["", ".webpack.js", ".web.js", ".js", ".ts"]
    },
    module: {
        loaders: [
            { test: /\.ts?$/, loader: "ts" }
        ]
    },
    ts: {
        configFileName : 'dev.tsconfig.json'
    }
};

Inaptitude

Perfect! So I'll do it so : module.exports = env => ({ ts : { configFileName : env.build === 'dev' ? 'dev.tsconfig.json' : 'acc.tsconfig.json'' } }) – Celka

outdated. Documentation no longer mentions a ts.configFileName option – Cassady

This no longer works, see this answer instead – Nationalism

Not sure if they changed it, but the name of the option is: configFile: github.com/TypeStrong/ts-loader#options. The name suggested in the answer makes webpack throw an error. – Kania

Answer 2

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
};

Fitzgerald

Awesome, thank you! Also note that for others still struggling, from the ts-loader docs if you are providing a relative path to a tsconfig "It will be resolved relative to the respective .ts entry file." – Foxhole

Answer 3

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.

Tucana

This does not work anymore for WebPack 4. See solution in my answer on this page. – Fitzgerald

Answer 4

More like below:

{
   test: /\.tsx?$/, 
   loader: 'ts-loader',
   options: {configFile: 'tsconfig.webpack.json'} 
}

https://www.npmjs.com/package/ts-loader#configfile-string-defaulttsconfigjson

Primitivism

Answer 5

Update @ September 6, 2017

configFileName has been deprecated in favor of configFile - Source

Sabbatical

I don't have enough rep to comment so I apologize for add this as an answer. Clearly someone didn't like that. =) – Sabbatical

Answer 6

Try using configFile after the loader name as querystring. Here is webpack config and ts-loader's config

module.exports = {
   entry : "./main.ts",
   output : {
        path : __dirname + "/dist",
        filename : "bundle.js"
   },
   resolve : {
       extensions : ["", ".js", ".ts"]
   },
   module: {
     loaders: [
        { test: /\.ts?$/, loader: "ts-loader?configFile=src/tsconfig.server.json" }
     ]
   },
};

Saintsimonianism