A webpack 5 boilerplate for Typescript using babel
git clone [email protected]:dennisja/webpack-typescript-boilerplate.git- With yarn:-
yarn- With npm:-
npm i- With yarn:-
yarn start- With npm:-
npm start- With yarn:-
yarn build- With npm:-
npm run build- Webpack - code and asset bundling
- Babel - Transpiling Typescript and JavaScript
- Typescript - Type information
- Yarn - Package manager
- 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
- 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
- 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
-
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/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.
- 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