Abstract: Webpack is a front-end resource building tool, a static module packer.
# 1. In this paper
Webpack is a front-end resource builder, a static module packer. In Webpack’s view, all the front-end resource files (JS /json/ CSS /img/less/…) Will be treated as modules, and when Webpack processes the application, it will do static analysis based on module dependencies, packaging to generate the corresponding static resources. Figure 1-1 shows the Webpack packaging process.
Figure 1-1 Webpack packaging flowchart
#2. Five core concepts of Webpack
2.1 Entry
The Entry indicates which file Webpack uses as the Entry point to analyze and package the internal dependency diagram.
2.2 the Output
Output indicates where the resource bundles Output from Webpack go and how to name them.
2.3 Loader
Loader enables Webpack to process files in non-javascript languages, Webpack itself only understands JavaScript.
2.4 the Plugins
Plugins can be used to perform a wider range of tasks, from packaging and compression to redefining variables in the environment.
2.5 Mode
Mode instructs Webpack to use the configuration of the corresponding Mode. It is divided into development and production modes, which are briefly described below.
- NODE_ENV is set to development and NamedChunksPlugin and NamedModulesPlugin are enabled.
- production: Production mode, which allows code to run in an optimized environment, sets process.env.node_env to production, At the same time enable FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitreplaceStringsPlugin, OccurrenceOr DerPlugin, SideEffectsFlagPlugin, and UglifyJsPlugin plugins.
# 3. Wbepack configuration
3.1 webpack. Config. Js file
Webpack.config. js is a configuration file for Webpack, used to instruct webpack to work. When running the WebPack directive, the configuration inside will be loaded. Figure 3-1 shows the basic configuration of webpack.config.js.
Figure 3-1 Webpack.config. js basic configuration
3.2 devServer configuration
DevServer is used for automation (auto-compile, auto-open browser, auto-refresh browser). It will only compile and package in memory without any file output. Run the NPX webpack-dev-server command to start devServer. Figure 3-2 shows the core code.
Figure 3-2 Core code of devServer configuration
3.3 Package HTML/styles/images/other resources
Different loaders and plug-ins are used to package different resources. The process for packaging HTML/styles/images/other resources is described below.
3.3.1 Packaging HTML Resources
1. Download htML-webpack-plugin;
2. Introduce htML-webpack-plugin;
3. Use the HTmL-webpack-plugin and configure it accordingly.
3.3.2 Packaging style resources
Different loaders need to be configured for different style files
1. Download loader.
2. Configure loader. CSS style files use CSS-loader and style-loader, and less files use less-loader, CSS-loader, and style-loader. Style-loader is used to create style tags, insert style resources in JS, and add them to the head to take effect.
3.3.3 Packaging Image Resources
1. Download url-loader and file-loader
2. Configure the loader
3.3.4 Packaging Other Resources
1. Download the file – loader
- Configure loader to apply to files that are not HTML, CSS, less, or JS
3.4 Extracting the CSS into an Independent file/CSS Compatibility processing/COMPRESSION of the CSS
3.4.1 Extracting the CSS into a separate file
By default, the style file will be exported together with the JS file after being packaged. You can export the CSS file separately through the plug-in, as described below.
1. Download the mini-CSS-extract-plugin
2. Reference the plug-in
Configuration of 3.
3.4.2 Compatibility of the CSS
1. Download postCSS-loader and postCSs-preset -env
2. In the package.json browsetslist property, configure compatibility for the development environment and production environment respectively, and set the browser version that supports the style
3. Use postcss to find the configuration in package.json in Browserslist and load the specified CSS compatibility style using the configuration.
CSS rule 3.4.3 compression
Download the optimize- CSS -assets-webpack-plugin
2. Reference the plug-in
3. Use the plug-in
Eslint/JS compatibility handling/JS compression
3.5.1 JS syntax checking ESLint
1. Download eslint-loader and ESLint
2. Set the parameters in eslintConfig in package.json
3. Configure esLint-loader, which only checks js files and excludes third-party libraries, and only checks its own source code. 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, and @babel/preset-env, run @babel/preset-env to perform basic JS compatibility processing, and run Corejs to perform compatibility processing that cannot be realized previously, and preset loading is realized on demand
- Configure the loader
Figure 3-3 shows the core code for processing the JS compatibility
Figure 3-3 Core code for js compatibility processing
3.5.3 js compressed
Mode is set to production and js code is compressed automatically.
#4. Webpack performance optimization
Webpack can be optimized for performance in both development and production environments. The development environment is mainly optimized from two aspects of package construction speed and code debugging, while the production environment is mainly optimized from two aspects of package construction speed and code running performance. Here is a brief introduction to speed up builds with HMR in a development environment.
4.1 HMR
HMR(hot module replacement), which is used to update and pack only one module instead of all modules when a module changes, is enabled by setting the hot: True property in devServer.
For style files, you can use the HMR function because style-loader is implemented internally.
For js file, the default cannot use HMR function, the solution: modify the js code entry file, add support HMR function code, the other HMR can only handle the entrance to the js files of other files, the entrance to the file doesn’t take effect, because once the entry file update, entrance file import other files will be reloaded;
For HTML files, the HMR function is disabled by default, and the HTML files cannot be hot updated. The solution is as follows: Modify the Entry file to import the HTML file, which only solves the problem that the HTML file cannot be hot updated.
Figure 4-1 shows the core code of the HMR function supported by the JS file.
Figure 4-1 CORE codes of the HMR function supported by js files
4.2 effect of HMR
Import the print.js file into the entry index.js file and run NPX webpack-devserver. The page is shown in Figure 4-2.
4-2 Initial page
After the print.js file is modified, only the print.js file is reloaded, but the index.js file is not reloaded. Figure 4-3 shows the HMR effect.
4-3 HMR effect drawing
Click to follow, the first time to learn about Huawei cloud fresh technology ~