https://github.com/sssshefer/webpack

How to optimize your application performance with webpack
https://github.com/sssshefer/webpack

babel react typescript webpack

Last synced: 3 months ago
JSON representation

How to optimize your application performance with webpack

• Host: GitHub
• URL: https://github.com/sssshefer/webpack
• Owner: sssshefer
• Created: 2024-05-07T19:17:47.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2024-05-31T10:15:46.000Z (8 months ago)
• Last Synced: 2024-09-29T02:40:36.411Z (4 months ago)
• Topics: babel, react, typescript, webpack
• Language: TypeScript
• Homepage:
• Size: 789 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# Every Day Webpack Features  

This project serves as a comprehensive guide for using webpack effectively in web development. It covers essential features and provides practical insights and examples to help developers optimize their workflow and boost application performance

## This project inlcude how to:

1) Connect the **environment variables**

2) Make **different build scenarios**: for production and development 

3) Connect **HTML** to the application using webpack, configure **dynamic file names** in order to prevent client side files from being cashed

4) Add **plugins** to webpack

5) Add **Typescript support** and other **loaders** 

6) Properly migrate **webpack config to Typescript** and use **global.d.ts** file 

7) Use **dev server**, **watch mode** for better development experience and why do we need the **source map**

8) Connect **react and jsx** 

9) Support **CSS styles** and use **SCSS preprocessor** 

10) Properly **decompose** the large **webpack config** and make **reusable components**

11) Isolate styles with **CSS modules**

12) Implement **routing**, **lazy components**, decrease a size of the bundle

13) Create **aliases**, module resolving

14) Work with **assets** (images, icons and more)

15) Properly work with **global variables** and what is **tree shaking**

16) Speed up build proccess by extracting **type checking** to **separate process**

17) Stop reloading page after changing the code with **HMR (Hot Module Replacemenet)**

18) Use **favicon** and copy any other files to final build with **copy plugin**

19) Use **Babel** and create **own plugins** with it

    

### Git clone the repo 

```bash

$ git clone https://github.com/sssshefer/webpack.git

```

### 1) How to run the project 

```bash

$ npm run start

```

### 2) How to make development build

```bash

$ npm run build:dev

```

### 3) How to make production build

```bash

$ npm run build:prod

```

### 4) How to do typechecking

```bash

$ npm run typecheck

```