📄️ preface
This module will lead you to understand the basic concepts and usage of Webpack5, as well as some common configuration items and plug-ins. Please upgrade the Node.js version to at least 10.13.0 and above (the latest LTS version is best).
📄️ Basic Usage
Introduce the basic usage of Webpack5
📄️ Basic Configuration
Before we start using Webpack, we need to have a certain understanding of the configuration of Webpack.
📄️ Processing style resources
Webpack itself cannot recognize style resources and needs to use Loader to parse style resources. You should first find the corresponding Loader from Webpack official Loader document. If you can't find it, you can search and query from the community or GitHub.
📄️ handle image resources
In the past, when Webpack4 was used, we processed image resources through file-loader and url-loader.
📄️ Modify the name and path of output resources
If you need to modify the name and path of Webpack output resources, you can do so by configuring the output option.
📄️ Automatically clear the last packaged resources
In the previous processing, we need to manually delete the last packaged resources if we want to see some effects, but this is obviously not convenient enough, so Webpack provides the function of automatically clearing the last packaged resources.
📄️ Handle fonts, icons, audio, video and other resources
In actual development, we often use fonts, icons, audio, video and other resources. How does Webpack handle font icon resources? The following takes fonts as an example to introduce how Webpack handles other resources.
📄️ Configure code checking tool ESLint
ESLint is an open source JavaScript code static analysis tool for discovering and fixing problems in the code. It was originally created by Nicholas C. Zakas in 2013 to provide a highly configurable linting tool that can be adjusted according to the needs of the project.
📄️ Configure code compatibility processing tool Babel
Babel is a widely used JavaScript compiler, mainly used to convert modern JavaScript code (including ES6+) into a backward compatible version so that it can run in all browsers or environments.
📄️ Handle HTML files
html-webpack-plugin greatly simplifies the manual management of HTML files by automatically generating HTML files. The plugin automatically inserts the packaged resources (such as JS, CSS files) into the generated HTML file based on the output of Webpack, and can generate the final HTML file based on the template file.
📄️ Automatic compilation using devServer
Every time you finish writing code, you need to manually enter instructions to compile the code. It's too troublesome. We hope everything will be automated.
📄️ Build development environment and production environment separately
In actual development, we often have development environment and production environment, and the configurations of the two will be different. This article will introduce how Webpack builds development environment and production environment separately.
📄️ Optimize CSS processing
There are still many areas that can be optimized for CSS processing. The following will introduce extracting CSS into separate files, CSS compatibility processing, CSS compression, etc.
📄️ Configure SourceMap
SourceMap is a technology used to debug compressed or compiled code. It maps compressed or compiled code back to the original source code, allowing developers to view the original code in the browser's developer tools and debug it.
📄️ Improve the speed of packaging and building
In addition to the previous basic configuration, webpack5 can also improve the speed of packaging and building through configuration.
📄️ Reduce code size
In actual development, the project size will become larger and larger, and the amount of code will also increase. At this time, we need to compress the code and reduce the size.
📄️ Configure code splitting
When bundling code, all JS files will be bundled into one file, resulting in a large file size. If we only need to render the homepage, we should only load the JS file of the homepage, and not load other files. Therefore, we need to code split the files generated by the package to generate multiple JS files. In this way, only the corresponding JS file is loaded for rendering a certain page, reducing loading resources and increasing speed.
📄️ PWA
When developing a Web App project, once the project is offline, it cannot be accessed.
📄️ Create Loader
Loader is the core of webpack, which helps webpack convert different types of files into modules that webpack can recognize.
📄️ Create Plugin
Through plugins, we can extend webpack and add custom build behaviors, so that webpack can perform a wider range of tasks and have stronger build capabilities.