How do I set up Webpack with TypeScript?

How do I set up Webpack with TypeScript?

To set up Webpack with TypeScript, you'll need to install Webpack, TypeScript, and the necessary loaders. Start by running npm install --save-dev webpack webpack-cli ts-loader typescript.

What should I include in my webpack.config.js file?

In your webpack.config.js, you should include the entry point, output configuration, and module rules for TypeScript. Here's a basic example:

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/, 
      },
    ],
  },
};

Do I need a tsconfig.json file?

Yes, you need a tsconfig.json file to configure TypeScript options. You can create one with npx tsc --init and customize it as needed.

How do I run the Webpack build?

You can run the Webpack build by adding a script in your package.json like this:

"scripts": {
  "build": "webpack"
}

Then, run npm run build in your terminal.