How do the modern build tools work? (vite, webpack)
Aman Singh
Posted on June 30, 2024
What is a build tool?
- In simple words, a build tool is software that automates the process of converting the code into the final product.
- 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.
Posted on June 30, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 27, 2024