React webpack.config.js


Example

module.exports = {
    entry: './src/index',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.ts', '.tsx']
    }
};

The main components are (in addition to the standard entry, output and other webpack properties):

The loader

For this you need to create a rule that tests for the .ts and .tsx file extensions, specify ts-loader as the loader.

Resolve TS extensions

You also need to add the .ts and .tsx extensions in the resolve array, or webpack won't see them.