webpack
As 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
loader
Is 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.
loader
Support 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_modules
Create 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"--github.com/jamiebuilds/the-super-tiny-compiler
I recently read the "You do not know the JavaScript" a book, found that the first section is about the basic principles of compiling, yes, you use the daily JavaScript compilation process, and the above mentioned are the same, you say you want to learn?
Reference "How to write a loader"