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

In this issue, the editor will bring you about how to analyze the concept of Loader in webpack4.0. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Webpack, as the hottest front-end construction tool, is the most important part of the front-end automation tool chain. This series is the author's own learning record, comparative basis, hope that through the problem + solution model, the specific needs encountered in the front-end construction as the starting point, learn the corresponding processing methods in the webpack tool. (the configuration and usage of the parameters in this article are based on the webpack4.0 version)

one。 Summary of loader

Loader is one of the core concepts of webpack. Its basic workflow is to read a file in the form of a string, parse it and convert it (or directly introduce ready-made compilation tools into loader, for example, sass-loader introduces node-sass to convert SCSS code into CSS code, which is then processed by css-loader), and then leave it to the next step for processing. All loaded modules will eventually be processed by moduleFactory. Convert to code that javascript can recognize and run, thus completing the integration of the module.

Loader supports chained calls, so developers need to strictly follow the "single responsibility" principle, that is, each loader is only responsible for what it is responsible for: processing the input information and exporting it to the next loader-recognizable format.

In actual development, there are few scenarios where you need to write your own loader to implement complex requirements. If a file with an extension cannot be quickly integrated into an automated build tool, it will probably be abandoned soon. Everyone is so busy, right? However, it is necessary to understand the basic principles of loader and the compiler.

two。 How to write a loader

If you need to write a full-featured loader, it is recommended to go to the official website of webpack to browse the API of loader, address: webpack official website-loader API, which explains in great detail how to write synchronous loader, asynchronous loader, how to skip loader, how to obtain options configuration items, and so on.

Suppose you are now implementing a dash-loader whose function is to load and process a file named * .tpl.html and turn it into a CommonJs module. In other words, you need to complete the following basic transformation:

Text before conversion:

Here's the title.

Here's the content.

Converted text:

Var str = 'here is the title

Here's the content.

'; module.exports = str

Then the following configuration needs to be added to webpack.config.js:

Module: {rules: [{test: /\ .tpl\ .html $/, use: [{loader:'dash-loader'}]}]}

Create a new dash-loader folder in the node_modules dependent folder of the project, and create a new index.js file in it. The basic format of the content is:

/ / index.jsmodule.exports = function (source) {var tpl= "; source.split (/\ r?\ n /) .forEach (function (line) {line=line.trim (); if (! line.length) {return;} / / A pair of line is processed. Tpl+=line;}); return "var tpl=\'" + tpl+ "\'\ nmodule.exports = tpl";}

In the end, the data returned by dash-loader is as if it had been read from some CommonJs module.

three。 Compiler essence of loader

Now that you understand the basic structure of loader, what exactly should be written in loader to complete the transcoding? This involves a new concept-compiler (Compiler). A basic compiler needs to go through several core steps of tokenize,parse,transform,stringify, and its application is very wide, such as virtual-DOM parsing in SPA, ES6 syntax parsing in babel, and so on. Babel's official website once recommended a great open source project (10k+Star), which describes in detail how to implement a compiler step by step. It is recommended that students who are interested can learn by themselves:

[The-Super-Tiny-Compiler]-- https://github.com/jamiebuilds/the-super-tiny-compiler

The above is the editor for you to share how to analyze the concept of Loader in webpack4.0, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.