Webpack framework (master core technology)

Webpack is a module bundler for modern JavaScript applications. This article mainly introduces the core concepts of the Webpack framework (organizing knowledge points). Friends in need can refer to

What is webpack

webpack It is a packaging tool for front-end construction (not a library or framework). It can process and use various 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 packager for modern JavaScript applications (module bundler). When webpack processes an application, it recursively builds a dependency graph that contains every module the application needs, and then packages all these modules into one or more bundles.

1.2 The four core concepts of webpack:

1.2.1 entry: entry point, entry starting point (there can be multiple), webpack will start from this starting point to find out which The file is what the entry file depends on, so as to build an internal dependency graph and process it and output it to a file called bundles

　1.2.2 output (output): Specify the bundle file processed by the entry point The output path (path) and name (filename) of 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. It has two goals:

　　　1.2.3.1 Use the test attribute to identify the corresponding Convertible files for loader

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

　　If you want to use webpack When defining loader in the configuration, it must be defined in module.rules instead of rules

　1.2.4 plugins: 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 only need to require() it and then add it to the plugins array. Most plugins can be customized through options. You can also use the same plug-in multiple times for different purposes in a configuration file. In this case, you need to create an instance of it by using the new operator.

　　　 Webpack provides many plugins available out of the box! Check the plug-in list for more information. For more detailed pictures and texts, please refer to the official documentation https://doc.webpack-china.org/concepts/.

The above is the text I compiled, I hope it will be helpful to everyone

Related articles:

How to achieve the effect of cross coordinates following the mouse in JS

Problems with unsafe image paths when using Angular4

How to build Electron applications in Webpack

In Webpack Regarding optimization configuration issues

How to dynamically add to the list in jQuery

How to implement the online customer service function in jQuery

How to implement entry/leave animation in Vue

Detailed introduction to routing and middleware in node.js

How to implement basic shopping cart functionality using Angular

Detailed introduction to controlled components and uncontrolled components in React

Use vue to implement simple keyboard operations

The above is the detailed content of Webpack framework (master core technology). For more information, please follow other related articles on the PHP Chinese website!