What's the difference between tsconfig's 'outFile' and webpack config's 'output'

Question

What's different between the 'output' path? Is tsconfig is a loader? And webpack to resolve '.ts' file after the run tsconfig build?
Why the file 'src.js' is not found? It is deleted by webpack automatically?

tsconfig.json:

{
    "compilerOptions": {
        "module": "amd",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "src.js",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

webpack.config.js:

module.exports = {  
    entry: './index.ts',  
    output: {  
        filename: './dest.js'  
    },  
    module: {  
        loaders: [{  
            test: /\.ts$/,  
            loader:'ts-loader'
        }]  
    },  
    resolve: {  
        extensions: ['.webpack.js', '.web.js', '.ts', '.js']  
    }  
}  

When I run 'webpack' the 'src.js' is not found and 'dest.js' is ok.

Thanks a lot.

Answer 1

outFile

This configuration option is used by TS compiler when using tsc command to

Concatenate and emit output to single file.

You can read more about compiler options here.

output

This configuration option is used by Webpack to

The top-level output key contains set of options instructing webpack on how and where it should output your bundles, assets and anything else you bundle or load with webpack.

Why src.js is missing

When you use ts-loader instead of a tsc as part of webpack built, the outFile option from tsconfig.json is not used. Webpack when loading a .ts file detects that it should be passed to ts-loader, which in turn uses a compiler to compile only this one file and then returns output to a webpack. It never works with all files the way tsc does. That's why no src.js is generated.