What is the webpack

Webpack is a front-end resource builder, a static Module bundler. In webpack’s view, all the front-end resource files (JS /json/ CSS /img/less/…) Will be treated as modules. It will carry out static analysis according to module dependencies and generate corresponding static resources (bundles) by packaging.

In the past, packaging front-end resources (such as less -> CSS, ES6 -> ES5, etc.) are different tools to maintain and compile packaging, which is very troublesome and difficult to maintain. So in addition to the front end resource build tool, the front end resource build tool is a big tool, all these little tools together, I just need to maintain the big tool, the big tool can do a series of small things. Big tools are build tools

Static module packagers: In webpack, JS, CSS, IMG, and so on are static resources. Webpack introduces all resources (JS, images, etc.) into a JS file. Webpack takes this JS file as the entry file, sorts out their dependencies, and introduces them into a code chunk. Chunk is compiled and packaged, and then exported (the file is called bundle).

Webpack has five core concepts

Entry

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

Output

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

Loader

Loader allows Webpack to handle non-javascript files (Webpack only handles JavaScript itself)

Plugins

Plugins can be used to perform a much wider range of tasks. Plug-ins range from packaging optimization and compression to redefining variables in the environment.

Mode

Mode instructs Webpack to use the configuration of the corresponding Mode