Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to develop Webpack Loader". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to develop Webpack Loader.

I. single task

Loaders can be called chained to create a loader for each step instead of a loader to do everything. That is, it is not necessary to convert them to js if they are not necessary.

For example, convert a string template to html through a query string.

If you write a loader. After doing everything, then you disobeyed the first requirement of loader. You should create a loader for each task and use them through pipes.

(1) ade-loader: convert the template to a module

(2) apply-loader: create a module and return the result by querying parameters

(3) html-loade: create a module that processes html and returns a string

Second, create a moulde module, that is, a normal module

The module produced by loader should follow the same design principles as ordinary module.

For example, the following design is not good, there is no modularization, and depends on the global state.

Third, try to indicate whether the loader can be cached

Most of the loaders is cacheable, so you should indicate whether it is cacheable or not, just call it in loader.

Do not save the state between the run and the module

(1) A loader should be independent of other compiled modules. Unless it can handle these states on its own.

(2) A loader should be independent of the compilation process before the same module.

5. Indicate dependence

If the loader references other resources, such as the file system, you must declare them. This information is used to invalidate the cached loader and recompile them.

VI. Analytical dependence

Many languages provide specifications to declare dependencies, such as @ import and url (...) in css. These dependencies should be parsed by the module system.

Here are two solutions:

1. Convert them into require

2. Use this.resolve method to analyze the path.

Here are two examples:

1. Css-loader: convert dependencies into require, that is, replace @ import and url (...) with require, and resolve dependencies on other style files.

2. Less-loader: you can't do it like css-loader, because all less files need to be compiled together to parse variables and mixins. So it extends the less compilation process through a common path logic. This common logic uses this.resolve to parse files with module system configuration items. For example, aliasing, custom module directories, etc.

If the language only accepts relative urls (for example, url (file) always stands for. / file in css), use ~ to indicate module dependency.

7. Withdraw from the public code

Extract common code, I think it's better to translate into the above title. In fact, all languages follow this idea, that is, encapsulation

Instead of writing a lot of code that each module uses, create a runtime file in loader and put the common code in it

Avoid writing absolute paths

Do not write the absolute path to the module code. They will break the hash process when the root directory of the project changes. You should use loader-utils 's stringifyRequest method to convert an absolute path to a relative path.

Example:

9. Use peerDependencies to indicate dependent libraries

Using peerDependency allows application developers to specify the specific version of the dependency in package.json. These dependencies should be relatively open to allow the toollibrary to be upgraded without the need to rerelease the loader version. In short, libraries that peerDependency depends on should be loosely coupled, and there is no need to change the loader version when the version of the toollibrary changes.

10. Programmable objects as query items

In some cases, loader requires some programmable objects but cannot be parsed by methods as serialized query parameters. Less-loader, for example, provides this possibility through a specific less-plugin. In this case, loader should allow you to extend webpack's options object to get a specific option. To avoid name conflicts, naming based on loader namespaces is necessary.

At this point, I believe you have a deeper understanding of "how to develop Webpack Loader", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.