webpack4.0 Conquer (6)--loader

webpackAs the most fire-front building tool, is the most important part of the front-end automation tool chain, the use of high threshold. This series is the author's own study record, compares the foundation, hoped through the problem + solves the pattern, takes the front-end construction to meet the concrete demand as the starting point, the Learning webpack tool corresponding processing method. (The parameter configuration and usage methods in this article are based on webpack4.0版本 )

I. Loader overview

loaderIs webpack one of the core concepts, its basic workflow is to read a file as a string, parse it and transform it (or simply loader introduce a ready-made compilation tool in, for example, introduce the sass-loader node-sass scss code into CSS code, and then Processing css-loader ), and then to the next session, all loaded modules will eventually be moduleFactory processed and translated into code that can be identified and run by JavaScript to complete the integration of the modules.

loaderSupport chaining calls, so the development needs to strictly follow the "single responsibility" principle, that is, each loader only responsible for their own things: the input information processing, and output to the next loader recognizable format.

In real-world development, there are few scenarios where you need to write your own loader to achieve complex requirements, and if a file with an extension cannot be quickly integrated into an automated build tool, it is estimated that it will soon be abandoned and everyone is so busy. but the loader fundamentals of understanding and the fundamentals of compilers are very necessary.

Two. How to write a loader

If you need to write a fully functional loader , it is recommended to first webpack visit the official web site loader API , address: Webpack official website-loader API, which for writing synchronization loader, Asynchronous loader, how to skip loader, How to get options configuration items and so on have done a very detailed explanation, this article does not repeat.

Suppose you want to implement one now dash-loader , its function is to load and process the name *.tpl.html of the file and turn it into a CommonJs module. This means that you want to complete a basic conversion as follows:

Text before conversion:

<div>    

Converted text:

var str = ‘<div>

Then webpack.config.js you need to add the following configuration:

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

node_modulesCreate a new folder in the project's dependent folder dash-loader 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; } //对line进行处理... tpl+=line; }); return "var tpl=\‘" + tpl + "\‘\nmodule.exports = tpl"; }

Eventually dash-loader the data returned is as if it were read from a CommonJs module.

Three. Compiler nature of Loader

Understand loader the basic structure, so what in the loader should write something to complete the code conversion? This involves a new concept-the compiler (Compiler). A basic compiler, need to pass tokenize ,, parse , transform a stringify few core steps, its application is very wide, spa in the virtual-DOM parsing, Babel parsing and ES6 so on, babel The official website once recommended a very good Open source project (10k+star), detailed how to implement a compiler in step-by-step, suggesting that interested students can learn by themselves:

"The-super-tiny-compiler"--https://github.com/jamiebuilds/the-super-tiny-compiler

Reference

"How to write a loader"

webpack4.0 Conquer (6)--loader