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

score 45 · Answer 1 · answered Apr 10 '19 at 07:37

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

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." — Hunter Wright, Dec 18 '19 at 00:05

Jamie Birch · Answer 2 · 2017-12-08T11:58:41.733

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.

This does not work anymore for WebPack 4. See solution in my answer on this page. — mvermand, Apr 10 '19 at 07:33

score 12 · Accepted Answer · edited Feb 10 '21 at 20:57

12

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

edited Feb 10 '21 at 20:57

erdomke

4,980
1
24
30

answered Nov 04 '16 at 15:33

goenning

6,514
1
35
42

Perfect! So I'll do it so : `module.exports = env => ({ ts : { configFileName : env.build === 'dev' ? 'dev.tsconfig.json' : 'acc.tsconfig.json'' } })` – gr3g Nov 04 '16 at 15:42
21

outdated. Documentation no longer mentions a `ts.configFileName` option – Ozymandias Apr 25 '19 at 14:28
8

This no longer works, see [this answer instead](https://stackoverflow.com/a/55607159/542251) – Liam Feb 13 '20 at 13:19
1

Not sure if they changed it, but the name of the option is: `configFile`: https://github.com/TypeStrong/ts-loader#options. The name suggested in the answer makes webpack throw an error. – Andry Jul 15 '20 at 20:40

score 11 · Answer 4 · answered May 14 '19 at 06:55

11

More like below:

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

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

answered May 14 '19 at 06:55

jainmitesh09

163
1
7

score 8 · Answer 5 · answered Sep 06 '17 at 13:51

8

Update @ September 6, 2017

configFileName has been deprecated in favor of configFile - Source

answered Sep 06 '17 at 13:51

Frank Stallone III

151
1
3

4

I don't have enough rep to comment so I apologize for add this as an answer. Clearly someone didn't like that. =) – Frank Stallone III Sep 20 '17 at 14:55

score 2 · Answer 6 · answered Sep 15 '17 at 13:07

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" }
     ]
   },
};

Webpack ts-loader : change tsconfig filename

6 Answers6

Webpack config

Directory structure

Typescript config