Search code examples
typescriptwebpacktsconfigts-loader

Webpack ts-loader : change tsconfig filename


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

Solution

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