**Course Title:** Mastering TypeScript: From Basics to Advanced Applications **Section Title:** Build Tools and Deployment **Topic:** Set up a Webpack configuration for a TypeScript project.(Lab topic) **Objective:** In this hands-on lab, you will learn how to set up a Webpack configuration for a TypeScript project, enabling you to bundle and optimize your application for production. **Prerequisites:** * Familiarity with TypeScript and its ecosystem * Basic understanding of Webpack and its role in bundling JavaScript applications * Completion of the previous topics in the course, especially the ones covering TypeScript configuration and project setup **Step 1: Initialize a new TypeScript project** Create a new directory for your project and navigate to it in your terminal/command prompt. Initialize a new TypeScript project using the `tsc --init` command: ```bash mkdir my-typescript-project cd my-typescript-project tsc --init ``` This will create a new `tsconfig.json` file in your project directory. **Step 2: Install Webpack and required dependencies** Install Webpack and its dependencies using npm or yarn: ```bash npm install webpack webpack-cli webpack-dev-server typescript ts-loader --save-dev ``` This will install the necessary dependencies for Webpack to work with TypeScript. **Step 3: Create a Webpack configuration file** Create a new file called `webpack.config.js` in the root of your project directory: ```javascript // webpack.config.js const path = require('path'); module.exports = { entry: './src/index.ts', // entry point for your application output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.tsx?$/, // ts-loader will handle TypeScript files use: 'ts-loader', exclude: /node_modules/, }, ], }, resolve: { extensions: ['.ts', '.js'], // resolve files with .ts and .js extensions }, devtool: 'source-map', // generate source maps for debugging }; ``` This is a basic Webpack configuration that sets up a single entry point (`./src/index.ts`), compiles TypeScript files using `ts-loader`, and outputs a bundled file (`./dist/bundle.js`). **Step 4: Configure TypeScript to work with Webpack** Update your `tsconfig.json` file to include the following settings: ```json { "compilerOptions": { // existing settings... "outDir": "./dist", // output directory for compiled JavaScript files "rootDir": "./src", // root directory for your TypeScript files "sourceMap": true, // generate source maps for debugging } } ``` This tells the TypeScript compiler to generate JavaScript files in the `./dist` directory and source maps for debugging. **Step 5: Run Webpack** Use the `webpack` command to compile and bundle your application: ```bash npx webpack ``` This will create a bundled file (`./dist/bundle.js`) that can be used in your production environment. **Tips and Variations:** * To enable hot reloading during development, use the `webpack-dev-server` command: ```bash npx webpack-dev-server --inline --hot ``` * To configure Webpack for production, update your `webpack.config.js` file to include optimizations like code splitting, minification, and compression. * To integrate Webpack with other tools like Babel, explore the `@babel/loader` and `@babel/preset-env` packages. **Conclusion:** In this hands-on lab, you learned how to set up a Webpack configuration for a TypeScript project, enabling you to bundle and optimize your application for production. By following these steps, you can apply Webpack to your own projects and take advantage of its powerful bundling and optimization features. **Resources:** * Webpack documentation: <https://webpack.js.org/> * TypeScript documentation: <https://www.typescriptlang.org/> * ts-loader documentation: <https://github.com/TypeStrong/ts-loader> **Exercise:** * Create a new TypeScript project and set up a Webpack configuration to bundle and optimize your application. * Experiment with different Webpack settings and plugins to optimize your build process. * Test and debug your application using source maps and hot reloading. **Leave a comment or ask for help:** If you have any questions or need help with this topic, please leave a comment below.