Typescript Webpack Boilerplate

A webpack 5 boilerplate for Typescript using babel

Usage

Clone the repository

git clone git@github.com:dennisja/webpack-typescript-boilerplate.git

Install dependencies

• With yarn:-

yarn

• With npm:-

npm i

Running the project

• With yarn:-

yarn start

• With npm:-

npm start

Build for production

• With yarn:-

yarn build

• With npm:-

npm run build

Tools used

• Webpack - code and asset bundling
• Babel - Transpiling Typescript and JavaScript
• Typescript - Type information
• Yarn - Package manager

Features supported

• Loading scss and css files
• Loading images, SVGs and fonts
• Loading js, jsx, ts, tsx, and json source code files
• Reading scoped/prefixed environment variables. Can be from .env files or all environment variables.
• Linting
• Code formatting
• Using absolute imports

If you want to scope your environment variables. You will have to provide the prefix through the scope variable to the getEnvironmentVariables function call here

Dependencies

Webpack

• webpack - Module and asset bundler
• webpack-cli - The official cli for webpack
• webpack-dev-server - For faster development with webpack
• webpack-merge - Merge webpack configurations
• @types/webpack-dev-server - To add the devServer types to webpack
• cross-env - Running commands across multiple platforms

Webpack loaders

• source-map-loader - Extracts sourcemaps from existing source files
• babel-loader - For transpiling JavaScript and Typescript using Babel and webpack
• style-loader - To inject css in the DOM
• css-loader - Translate CSS to common JS
• sass-loader- Compile SCSS to CSS

Webpack plugins

• HtmlWebpackPlugin - Generate the html file from the template

• CopyWebpackPlugin - Copy individual files or entire directories, which already exist, to the build directory.

• ForkTsCheckerWebpackPlugin - Speeds up TypeScript type checking and ESLint linting (by moving each to a separate process)

• DotenvWebpack - Load dotenv and other environment variables

• DefinePlugin - Replace variables in your code with other values or expressions at compile time

• CSSMinimizerPlugin - minimize and optimize css

Babel

• @babel/core - Transpile modern JavaScript into backwards compatible JavaScript
• @babel/preset-env - Enables use of latest JavaScript features
• @babel/preset-typescript - Enables babel understand typescript
• @babel/preset-react - React defaults and plugins
• babel-plugin-macros - Enables the use of compile-time code transformation
• @babel/plugin-proposal-class-properties - Enable the use of class properties
• @babel/plugin-transform-runtime - Enables the re-use of Babel's injected helper code to save on codesize.

Linting and Formatting

• eslint - To enforce a style guide in the application
• eslint-plugin-react - Base react rules
• @typescript-eslint/eslint-plugin - Base typescript rules
• @typescript-eslint/parser - Parser to allows eslint lint Typescript code
• prettier - code formatting to enforce consistency
• eslint-plugin-prettier - Add prettier rules and turns off rules that may conflict prettier