Skip to main content

18 docs tagged with "packaging tool"

View All Tags

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.

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.

Basic Configuration

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

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

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.

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.

handle image resources

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

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.

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

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.

PWA

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