This is the 26th day of my participation in Gwen Challenge

What is Webpack?

Webpack is a front-end resource builder, a static module packer. In Webpack’s view, all resource files in the front-end are treated as modules. It will carry out static analysis according to module dependencies and generate corresponding static resources (bundles).

For example,

Eliciting build tools

  • In the example above, the syntax in many files is not recognized by the browser, and you need to convert the syntax in these files to a syntax that the browser can recognize. Therefore, the construction tool came into being, through the construction tool can be a variety of syntactic conversion tools are summarized, we just need to pay attention to how to use this construction tool, rather than to learn how to convert LESS to CSS, how to convert JS grammar into ES5 and so on. One such build tool is Webpack.

What do you mean pack up?

  1. As Webpack works, we first tell Webpack a starting point for packaging, the entry file.
  2. Webpack records each dependency in the file and forms a dependency tree.

  1. Resources are introduced in turn according to the dependency tree.
  2. After resources are imported, they form a chunk of code.
  3. The code in chunk is processed separately, such as compiling less to CSS and js syntax to javascript syntax that the browser can recognize.

The five steps described above can be summed up as packing!

Once packaged, start exporting

  • The output is called bundle.

The five core concepts of Webpack

1. Entry

  • The Entry Entry indicates which file Webpack starts packing as the Entry point, analyzing and building the internal dependency diagram.

2. Output

  • Output indicates where the resource bundles Output from Webpack go and how to name them.

3. Loader

  • Loader enables Webpack to handle non-JS files; Webpack itself only understands JS. (Loader is like a translator)

4. Plugins

  • Plugins can be used to perform a wider range of tasks, from packaging optimization and compression to redefining variables in the environment.

5. Mode

  • Mode instructs Webpack to use the configuration of the corresponding Mode

For more learning content, please follow my column.