Shulou(Shulou.com)06/03 Report--

This article focuses on "the core concepts of the Webpack framework", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn the core concepts of the Webpack framework.

What is webpack?

Webpack is a front-end built packaging tool (not a library or framework) that can process and use a variety of resources, such as JS (including JSX), coffee, css (including less/sass), images, etc., as modules.

1. Basic knowledge points

1.1 webpack is a module baler (module bundler) for modern JavaScript applications. When webpack processes an application, it recursively builds a dependency graph (dependency graph) that contains each module the application needs, and then packages all of these modules into one or more bundle.

Four core concepts of 1.2webpack:

1.2.1 entry (entry): entry point, the entry starting point (there can be more than one). Webpack will start from this starting point to find out which files the entry file depends on, so as to build an internal dependency graph and output it to a file called bundles.

1.2.2 output (output): specify the output path (path) and name (filename) of the entry point-processed bundles file

1.2.3 loader (loader): used to process non-JS files, all files can be converted into modules that webpack can handle, and then handed over to webpack for packaging and other processing. Webpack loader essentially converts all types of files into modules that can be directly referenced by the application's dependency graph, and has two goals:

1.2.3.1 use the test attribute to identify the convertible file corresponding to loader

1.2.3.2 use the use attribute to convert these files so that they are added to the dependency graph and eventually to the bundle

If you want to define loader in the webpack configuration, define it in module.rules, not rules

1.2.4 plugins (plug-in): from packaging optimization and compression to redefining variables in the environment. The plug-in interface is extremely powerful and can handle a variety of tasks

To use a plug-in, you just need to require () it, and then add it to the plugins array. Most plug-ins can be customized through options (option). You can also use the same plug-in multiple times for different purposes in a configuration file, and you need to create an instance of it by using the new operator.

Webpack provides many plug-ins available out of the box! Check the list of plug-ins for more information. For more details, please refer to the official document https://doc.webpack-china.org/concepts/.

At this point, I believe that you have a deeper understanding of the "core concepts of the Webpack framework". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.