Basic project configs for a TypeScript and WebPack project. (Requires TypeScript, WebPack, and WebPack CLI to be installed!)

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "rootDir": "./src/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5"
    }
}

webpack.config.js

// This config has the following MANDATORY NPM dependencies:
//      ts-loader, source-map-loader
// And the following OPTIONAL dependency:
//      webpack-dev-server.

module.exports = {
    mode: "development",
    devtool: "source-map",
    resolve: {
        // We include ".js" for the sake of the WebPack development
        // server. If we don't, the dev server fails to compile.
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        // This needs to be installed:
                        // `npm i --save-dev ts-loader`
                        loader: "ts-loader"
                    }
                ]
            },
            {
                enforce: "pre",
                test: /\.js$/,
                // This needs to be installed:
                // `npm i --save-dev source-map-loader`
                loader: "source-map-loader"
            }
        ]
    },
    // This is for webpack-dev-server (`npm i --save-dev webpack-dev-server`)
    devServer: {
        compress: true,
        port: 80
    }
};