How do I set up Webpack with React and TypeScript?

How do I set up Webpack with React and TypeScript?

To set up Webpack with React and TypeScript, you'll need to install several packages. Start by running: npm install --save-dev webpack webpack-cli ts-loader typescript react react-dom.

What should my webpack.config.js file look like?

Your webpack.config.js should include the following basic configuration:

const path = require('path');

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

Do I need to configure Babel as well?

If you're using TypeScript, Babel is not strictly necessary, but it can be useful for additional features like polyfills or specific transformations. You can integrate Babel by installing it and adding a Babel loader to your Webpack configuration.

Can you help me with the TypeScript configuration?

Sure! Create a tsconfig.json file in your project root with the following content:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}