Webpack from A to Asia: What is Webpack?

Tram Ho

Webpack từ A đến Á cùng kentrung

Welcome to Webpack series from A to Asia with kentrung. This is the first article we learn together about Webpack and why it should be used. This is nonetheless just the knowledge in the process of learning and doing the actual project that I draw and share for you. If there is anything missing or mistake, you are welcome to receive corrections from you.

1. What is Webpack?

  • Webpack is simply a tool that helps us bundle (bundle) all js, css, images, fonts … into one file or many files in an organized, neat, clean, and sweet way.
  • Link home page of webpack: https://webpack.js.org/

2. Why use Webpack?

There are many reasons to care about the benefits

  • Package multiple JavaScript and CSS files into a single file, especially the webpack will organize the content in the files in a logical way.
  • Wrap JavaScript and CSS files into minify format (file content is a single row, eliminate redundant spaces, help the smallest file)
  • Execute SCSS files automatically, if you work a lot with SCSS, you will definitely enjoy this feature
  • Optimize images, SVG, compress files to a minimum, or convert files into URLs (Base64) and insert this URL into the Bundle
  • Help convenient operation of local, development or server such as automatically loading (build) when saving, or controlling the file upload process to avoid errors …
  • Simply install a series of applications: SCSS, ReactJS …
  • A series of other features waiting for you to discover: compiling Babel ES6 to ES5, compiling CoffeeScript into Javascript, splitting into multiple files …
  • And importantly, the Webpack is completely free

3. Disadvantages of learning Webpack?

  • The documentation is very poor
  • Setting the configuration for Webpack is difficult, the syntax is confusing
  • It takes a long time for the initial webpack setup
  • Few instructors are easy to understand, clear, lack of head, lack of tail …

4. Is there any other tools besides Webpack?

We have: Browserify, Gulp, Grunt … are big names that are worth your attention, but here, care is not just about Webpack instruction.

5. Conditions of study

  • Good academic ability in subjects: HTML – CSS – Javascript. Before starting to learn about webpack I recommend you take the time to read the article: Explaining modern Javascript for dinosaurs
  • This article has to say that it is very interesting to provide the reader with a historical context of how JS tools have evolved. We will start by building a website like dinosaurs – no tools at all, just plain HTML and Javascript. We will then take a step through and gradually apply the tools to know what the problem will be solved. With this historical context, you will be able to learn and respond better to the change of Javascript now and in the future as well. You should read that article first and then will understand somewhat the effect of the webpack that you are about to learn.

6. Conclusion

I am just a newcomer about webpack, in the process of learning and doing the actual project also learned a little experience about it, so share it with you. The more I learn, the webpack is able to do a lot of pretty stuff so I can’t guide it all. Hope this webpack series from A to Asia with kentrung will help you gain more knowledge about it. The version at the time of the tutorial on 06/2020 is webpack 4.

Share the news now

Source : Viblo