What is WEB PACK? Easy-to-understand explanation of how to use and basic knowledge | [HACHINET SOFTWARE]

 2021-05-06

What is WEB PACK? Easy-to-understand explanation of how to use and basic knowledge | [HACHINET SOFTWARE]

The web app has been developing with these features, such as using JS, browsers supporting new technologies, fewer full-page - reloading pages, and more singles page app. This means a tool is needed to manage them effectively. So Webpack was created, and it is a powerful tool to be managed effectively. What is Webpack? What are the uses of Webpack? The following article will help you learn about Webpack. 

1. Introduction


GitHub - webpack-contrib/awesome-webpack: A curated list of awesome Webpack  resources, libraries and tools

Webpack is a tool that can encapsulate all JS, CSS files, including SCSS, Sass, etc. The implementation of this encapsulation is done according to the project structure and from module to module order.

Webpack is still a new module bundler. It receives modules and dependencies and generates corresponding static assets. 

 

2. Goals


Học Webpack 3

  • Divine dependencies into loaded chunks for necessary.
  • Short init time.
  • Each static asset can be a module.
  • They can integrate a third-party library into a module.
  • Webpack can custom mostly module bundler’s components.
  • It’s suitable for massive projects.
  • Webpack is highly evaluated as it has many practical functions. It can use a one-file compressed plugin, from 6MB to 76KB.
  • Webpack can contribute to a vast developer community, so Webpack has become a tool that owns the ability to support developers js.

 

3. Webpack’s essential knowledge


3.1. Webpack 4 don’t need a module bundler

Webpackとは?メリットや使い方、インストール方法を初心者向けに解説 | Udemy メディア

Webpack is a powerful tool and quite a few unique features. Besides, it also has limitations for this software is the configuration file.

Providing figurations for Webpack isn’t new, but for small projects, it’ll be more problematic. Sean, as well as the Webpack team, is gradually changing and becoming more user-friendly. Webpack is a tool without a file with the default configuration.

In Webpack 4, you don’t need to define the entry point and do it in the output file.

 

3.2. Webpack 4 production and development mode

Webpack has two common figurations:

  • A file is a configuration for development to define Webpack dev server and others.
  • Another configuration is for production to define uglifyjsplugin, sourcemaps, etc.

You'll need to have these two files for big projects. Inside Webpack 4. you can use its two states without having to do any configuration.

 

3.3. Module in Webpack

If already having input and output, we need to have a module. This is one of the declarations for loaders, preloaders, postloaders, etc.

  • PreLoaders: The preprocessors are usually loaded when running the loader module. It supports loading ESLint, also known as syntax check, JSHint. Usually, this step requires configuring if the code is being executed in the dev environment. For the product environment, you need to delete the implementers to save time on re-checking.
  • Loaders: In this step, you need to declare an array by compiles of different languages. This is one of the vital declaration steps for a Webpack.

For example, you convert LESS, CSS, ES6 into ES5, and the implementer can use babel.

 

3.4. Code splitting in Webpack

To those who know Webpack, code splitting is also an attractive function. 

There three ways to approach split code:

  • Entry point: Manually dividing the configuration file entry to start the application to run the Webpack.
  • Prevent duplication: Use split Chunk to remove duplicate bundle and split chunks. More straightforwardly, Webpack will automatically search for libraries to import different files. When your logic code needs it, it will get these separate files to use.
  • Dynamic import: The division of code is possible through functions called modules.

Entry point: This is one of the manual methods and usually not used. When both Index.JS and Lib.JS are added with the same C library, it will be like you used the C2 library times.

Prevent duplication: To prevent duplication, the plugin will allow the split Chunks plugin to take all the imported libraries in the project to split them into separate files until the logical code needs those libraries, then it will automatically import.

 

3.5. Dynamic import

To dynamic import or getcomponent, it will return imports and lodash. It needs to perform complicated operations since dynamic import will import lodash when required and increase performance.  

 

3.6. Environment

If you learn basically about Webpack, you can install Facebook’s create - react - app, which is easier to understand. If you want to learn advanced, you can install projects about react in Github to read and see more individual files. It's a Webpack.

Webpack’s operations usually are different from React - app creation, and it will pre-integrate new files to create more programs. 

But the project has three Webpack files, usually with a script for developers to develop and product releases to build servers for users to use. With dev versions, you can keep the comment code. As for the product version, you want to minify to be able to optimise.

Three Webpack files include:

  • config.js: This is one of the files that run for both environments.
  • config.dev.js: usually only runs for dev environments. You can plugin auto log data to make it easier for programmers to develop products.
  • config.prod.js: It is only deployed to production environments. You can configure, minify or delete comments, etc.

 

4. Webpack’s pros and cons


 

Pros:

  • Webpack is suitable for a single-page website.
  • It allows you to use two syntaxes require and import.
  • It also allows you to divide codes.  

Cons:

  • Webpack isn’t suitable for website beginners.
  • It works with CSS files, images and other files that are not JS, which can confuse those who want to comprehend Webpack.

 

5. Conclusion


Webpack is a powerful and valuable tool. It can be a massive advantage for coding. It helps you be more accessible at work and can optimise projects and project management effectively. 

Hachinet hopes this article had answered the question and essential knowledge about Webpack and helps you understand more about its uses.

We, "Hachinet Software", are Vietnam-based software services with dedicated, dynamic, enthusiastic teams who always have made efforts to please customers' and partners' satisfaction. We specialize in the followings:

  1. Web application (.NET, JAVA, PHP, etc.)
  2. Framework (ASP, MVC, AngularJS, Angular6, Node JS, Vue JS)
  3. Mobile application: IOS (Swift, Object C), Android (Kotlin, Android)
  4. System applications (Cobol, ERP, etc.),
  5. New Technology (Blockchain, etc.).

If you are considering offshore development, please feel free to contact us.
Here is our contact information.

Account Manager: Quan (Japanese/English available)

Phone number: (+84) 2462 900 388

Email: contact@hachinet.com