Introduction to webpack

In this tutorial, let’s learn the basics of webpack. As a static module packager for JavaScript applications, webpack can handle various static resources as modules. It is a very popular tool for front-end engineering. Learn the use of webpack on the basis of webpack4.0.

What is webpack

webpack is an open source front-end packaging tool. Webpack provides a modular development method that is lacking in front-end development. It treats various static resources as modules and generates optimized code from it. For example, static resources can include js, css, html, less, pictures, etc.

Webpack can set various functions from the terminal or by changing the webpack.config.js file. If we want to use webpack, a prerequisite is that Node.js must be installed first, and npm commands are required to install webpack or other plug-ins.

One of the features of webpack is to use loaders to convert resources into modules. Developers can customize the order and format of loaders to suit the needs of the project.

Why use webpack

When we are developing, we often encounter situations where multiple CSS and JS files are introduced into an HTML page, or some JS resources are dependent on each other, or a lot of installation packages are needed. These problems may Easily lead to slow page loading. So in order to solve this problem, we can use webpack to pack these files and pack all kinds of static resources into one file, so that the browser loads much faster.

In webpack, any static resource can be regarded as a module, and modules can also depend on each other. After the module is processed by webpack, it can be packaged into the static resource we want.

Four core concepts of webpack

There are four core concepts in webpack, including entry, output, loader, and plugins. As follows:

• entry: Used to specify which module webpack should use as the start of the build, you can specify one or more starting points, the default value is ./src.
• output: Specify the file output location and file name and other information of the final output of webpack. The default output location is ./dist.
• Loader: All types of files can be converted into effective modules that webpack can handle, and then we can use webpack's packaging capabilities to process them.
• plugins: The purpose is to solve other things that loader cannot achieve. It allows webpack to perform more tasks, from optimization and compression to redefining variables in the environment, which is very powerful.

webpack advantage

• webpack writes scripts in the form of commonJS, but it also has comprehensive support for AMD/CMD, facilitating code migration for old projects.
• It can be configured and packaged into multiple files to effectively use the browser's cache function to improve performance.
• Static resources such as style files and pictures can also be packaged as modules. With loader loader, it can support CSS preprocessors such as Sass and Less.
• Focus on dealing with modular projects, which can be used out of the box and in one step.
• Strong extensibility and perfect plugins mechanism.

to sum up

webpack is a module packaging tool, or it can also be called a modular packaging machine. Webpack can help us pack different resources and files, that is, merge them into one file. In addition, webpack can also perform CSS preprocessing and convert ES6 to ES5. In the next section we will learn how to install webpack.