21 docs tagged with "Webpack"

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.

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.

Before we start using Webpack, we need to have a certain understanding of the configuration of Webpack.

Introduce the basic usage of Webpack5

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.

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.

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.

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.

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.

Loader is the core of webpack, which helps webpack convert different types of files into modules that webpack can recognize.

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.

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.

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.

In the past, when Webpack4 was used, we processed image resources through file-loader and url-loader.

In addition to the previous basic configuration, webpack5 can also improve the speed of packaging and building through configuration.

If you need to modify the name and path of Webpack output resources, you can do so by configuring the output option.

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.

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).

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.

When developing a Web App project, once the project is offline, it cannot be accessed.

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.