Summary of using Webpack framework

This time I will bring you a summary of the use of the Webpack framework. What are the precautions when using the Webpack framework. The following is a practical case, let's take a look.

What is webpack

Webpack is a front-end packaging tool (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 bundler for modern JavaScript applications. When webpack As an application is processed, it recursively builds a dependency graph graph), which 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 entry file depends on, thereby constructing the internal dependency graph, and processing it and outputting it to a file called bundles

1.2.2 output (output): Specify the entry. The output path (path) and name (filename) of the bundle file processed by point      

1.2.3 loader: used to process non-JS files. It can convert all files into modules that webpack can process, and then hand them 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. It has two goals:

1.2.3.1 Use the test attribute to identify the convertible corresponding to the loader File

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 define the loader in the webpack configuration, To 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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue-cli webpack How to build the vue development environment

How to build the vue2-webpack2 framework

The above is the detailed content of Summary of using Webpack framework. For more information, please follow other related articles on the PHP Chinese website!