Shulou(Shulou.com)05/31 Report--

How to understand Webpack, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

1. Abstract

Webpack is a front-end resource building tool, a static module baler. In Webpack's view, all the front-end resource files (js/json/css/img/less/ …) It will be treated as a module, and when Webpack deals with the application, it will statically analyze the dependencies of the module and package them to generate corresponding static resources. The Webpack packaging flow chart is shown in figure 1-1.

Figure 1-1 flow chart of Webpack packaging

2. Five core concepts of Webpack

2.1 Entry

The Entry instructs Webpack to use which file as the entry starting point to analyze and build the internal dependency graph and package it.

2.2 Output

The output (Output) indicates where the Webpack packaged resource bundles is output and how to name it.

2.3 Loader

Loader enables Webpack to process files that are not in the JavaScript language, and Webpack itself can only understand JavaScript.

2.4 Plugins

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

2.5 Mode

Mode (Mode) instructs Webpack to use the configuration of the corresponding mode. It is divided into two modes: development and production, which are briefly described below.

Development: development mode, an environment that allows code to run locally, sets the value of process.env.NODE_ENV to development, and enables both NamedChunksPlugin and NamedModulesPlugin plug-ins

Production: production mode, an environment that allows code to run optimally, sets the value of process.env.NODE_ENV to production and enables the FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitreplaceStringsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin, and UglifyJsPlugin plug-ins.

3. Wbepack configuration 3.1 webpack.config.js file

Webpack.config.js is the configuration file of webpack, which is used to instruct webpack to work. When the webpack instruction is run, the configuration is loaded. All build tools are run on the nodejs platform, and commonjs modularization is used by default. The basic configuration of webpack.config.js is shown in figure 3-1.

Figure 3-1 webpack.config.js basic configuration

3.2 devServer configuration

Development server (devServer) is used to achieve automation (automatic compilation, automatically open the browser, automatically refresh the browser), will only be compiled and packaged in memory, there will be no file output, after the local installation of webpack-dev-server, start devServer through the npx webpack-dev-server command, the core code is shown in figure 3-2.

Figure 3-2 devServer configuration core code

3.3.Packaging html/ styles / pictures / other resources

Packaging different resources uses different loader and plug-ins, and the process of packaging html/ styles / images / other resources is described below.

3.3.1 package html resources

1. Download the html-webpack-plugin plug-in

two。 Introduction of html-webpack-plugin plug-in

3. Use the html-webpack-plugin plug-in and configure it accordingly.

3.3.2 package style resources

Different style files require different loader configurations.

1. Download loader

two。 Configure loader,css style files to use css-loader and style-loader,less files to use less-loader, css-loader, and style-loader. The role of css-loader is to load the css file into a commonjs module into the js file, and the role of style-loader is to create style tags, insert the style resources in js, and add them to head to take effect.

3.3.3 package picture resources

1. Download url-loader,file-loader

two。 Configure loader

3.3.4 package other resources

1. Download file-loader

two。 Configure loader to configure the loader to work on other files that are not html/css/less/js

3.4 extract css into a separate file / css compatibility processing / compress css3.4.1 extract css into a separate file

After the style file is packaged, it will be exported with the js file by default, and the packaged css file can be exported separately through the plug-in. The process is described below.

1. Download the mini-css-extract-plugin plug-in

two。 Reference the plug-in

3. Configuration

3.4.2 css compatibility processing

1. Download postcss-loader and postcss-preset-env

two。 Configure the compatibility of the development environment and the production environment in the browsetslist attribute of package.json, and set the browser version that supports the style.

3. Find the configuration in browserslist in package.json through postcss, and load the specified css compatibility style through configuration.

3.4.3 compress css

1. Download the optimize-css-assets-webpack-plugin plug-in

two。 Reference the plug-in

3. Use the plug-in

3.5 js Syntax check eslint/js compatibility processing / js Compression 3.5.1 js Syntax check eslint

1. Download eslint-loader and eslint

two。 Configure in eslintConfig in package.json

3. Configure eslint-loader, in which you only need to detect js files and exclude third-party libraries, and only detect the source code written by yourself. at the same time, you can set fix:true in the options configuration to automatically fix eslint errors.

3.5.2 js compatibility processing

1. Download babel-loader, @ babel/core, @ babel/preset-env, do basic js compatibility processing through @ babel/preset-env, then do compatibility processing that cannot be achieved previously through corejs, and achieve demand loading

two。 Configure loader

The core code for js compatibility processing is shown in figure 3-3.

Figure 3-3 js compatibility processing core code

3.5.3 js compression

Js code is automatically compressed when mode is set to a production production environment.

4. Webpack performance optimization

Webpack performance can be optimized from the development environment and the production environment respectively. Among them, the development environment mainly considers optimization from two aspects: packaging construction speed and code debugging, while the production environment mainly considers optimization from two aspects: packaging construction speed and code running performance. The following is a brief introduction to improving the construction speed through HMR in the development environment.

4.1 HMR

HMR (hot module replacement), the function is that when a module changes, only one module is updated and packaged, not all modules, and the HMR function is started by setting the hot:true attribute in devServer.

For style files, you can use the HMR feature because style-loader internally implements the

For js files, the HMR function cannot be used by default. The solution is to modify the js code of the entry file and add the code that supports the HMR function. In addition, HMR can only handle other files that are not imported js files, but cannot take effect on the entry file, because once the entry file is updated, other files introduced by the entry file must be reloaded

For html files, the HMR function cannot be used by default, and at the same time, the html file cannot be hot updated. The solution: modify the entry entry file and introduce the html file, which can only solve the problem that the html file cannot be hot updated.

The core code that the js file supports the HMR function is shown in figure 4-1.

Figure 4-1 the js file supports the core code of the HMR function

4.2 HMR effect

Import the print.js file into the entry index.js file, and after running npx webpack-devserver, the page looks like figure 4-2.

4-2 initial page

After you modify the print.js file, only the print.js file is reloaded, not the index.js file, and the HMR effect is shown in figure 4-3.

4-3 HMR effect drawing

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.