How do I set up a TypeScript project with Webpack Dev Server?

How do I set up a TypeScript project with Webpack Dev Server?

To set up a TypeScript project with Webpack Dev Server, first, ensure you have Node.js installed. Then, create a new project directory and run npm init -y to initialize a package.json file.

What packages do I need to install?

You need to install TypeScript, Webpack, Webpack CLI, and Webpack Dev Server. You can do this by running: npm install typescript webpack webpack-cli webpack-dev-server --save-dev.

How do I configure Webpack for TypeScript?

Create a webpack.config.js file in your project root. Here's a basic configuration:

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