How do the modern build tools work? (vite, webpack)

What is a build tool?

1. In simple words, a build tool is software that automates the process of converting the code into the final product.
2. This process can include the Compilation of code, Minification, Building, Code spitting, Transpilation, Testing, Assets optimization, and Providing a development environment.

Let's understand the process one by one :

• Compilation of the code: In this process, the build tool compiles the code into browser-understandable languages eg. Typescript to Javascript, SASS to CSS.

• Minification: This process includes minifying the files(removing the unnecessary code, comments, removing the white spaces, etc).

• Code spitting: Break up the code into smaller chunks and load them available on demand.

• Transpilation: Converting the moders ES6/ES7 module code into older version ES5 for older browsers.

• Testing: Running tests to check if code changes can produce bugs.

• Assets optimization: Compressing the images and other files to reduce the size for best use and fast load.

• Development Server: Build tools provide the local server with live reloading for development.

How build tool work?

• Configuration: Build tools are configured using the config files.
  e.g. webpack.config.js, vite.config.js. This config file defines the task to be performed on the source code.

• File processing: This process includes transpiling of files such as typescript to javascript and SCSS to CSS

• Output Generation: The final processed optimized files are generated and stored inside a defined folder e.g. build, gist.

Thank you for reading.