Webpack 5 brings along a lot of improvments. One of them is quick integration with TypeScript. This repository aims to provide a boilerplate code for developers looking to get started with TypeScript for front end development.

This repository requires docker for compiling and executing the code.

#1 Clone the repository on your local machine - git clone https://github.com/vishalraj82/typescript-webpack5

#2 Move inside the repository - cd typescript-webpack5

#3 Compile the Typescript code using docker - docker compose -f docker/docker-compose.yml up

#4 Open a tab in browser and visit the following URLs

• http://localhost/
• http://localhost/clock.html

Since we need a server to serve the generated code, hence here we are utilizing the nginx docker image to server the compiled contents. By default the port 80 on host machine is mapped to port 80 of the nginx container. In order to change this, please edit the file docker/docker-compose.yml.

Lets try to understand the npm packages from the file package.json

• @types/react - TypeScript type definitions for React
• @types/react-dom - TypeScript type defintions for React DOM
• @types/webpack - Typescript type defintions for Webpack
• css-loader - The css-loader interprets @import and url() like import/require() and will resolve them.
• html-webpack-plugin - Plugin that simplifies creation of HTML files to serve your bundles
• mini-css-extract-plugin - This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps. It builds on top of a new webpack v5 feature and requires webpack 5 to work.
• react - React is a JavaScript library for creating user interfaces. The react package contains only the functionality necessary to define React components. It is typically used together with a React renderer like react-dom for the web, or react-native for the native environments.
• react-dom - This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react to npm.
• sass - A pure JavaScript implementation of Sass
• sass-loader - Loads a Sass/SCSS file and compiles it to CSS.
• ts-loader - This is the TypeScript loader for webpack.
• ts-node - TypeScript execution and REPL for node.js, with source map and native ESM support.
• typescript - TypeScript is a language for application-scale JavaScript. TypeScript adds optional types to JavaScript that support tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to readable, standards-based JavaScript.
• webpack - Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
• webpack-cli - webpack CLI provides a flexible set of commands for developers to increase speed when setting up a custom webpack project. As of webpack v4, webpack is not expecting a configuration file, but often developers want to create a more custom webpack configuration based on their use-cases and needs. webpack CLI addresses these needs by providing a set of tools to improve the setup of custom webpack configuration.

mode - Defines how Webpack with produce the final output.

entry - Define the files which will be used by Webpack to start processing.

output - Defines the location and the naming of the Webpack output files.

optimization - Defines the strategy for optimization of the Webpack output.

resolve - Since TypeScript forbids adding extension .ts or .tsx when importing, hence Webpack must know what extensions to use to resovle the file imports.

module - Since Webpack is built only for Javascript, hence any other type of files in the source must be handled by third-party packages.

plugins - Array of Webpack plugins to be used on the output produced by Webpack.