In fact, you love me like who, what role I will play.

Antecedents to review

The last article briefly introduced Loader, and today I will talk about my understanding of Loader.

What is the loader

A node module that exports a function. This function is called when some resource or file needs to be converted. And this function or method has the right to call the Loader API provided by WebPack.

The loader configuration

Normally, loader configuration is in the module.rules object of webpack, for example:

    module: {

      rules: [

        {

          // test: /\.vue$/,

          // use: [

          / / {

          // loader: 'iview-loader',

          // options: {

          // prefix: true

          / /}

          / /}

          // ]

          test:/\.vue/.

          loader: 'test-loader'

        },

].

    },

Copy the code

Test indicates which files are matched, and loader indicates which loader is used to convert these files. Here I wrote a test-loader to test a demo I wrote locally.

Test your own loader

I have a previous project in my computer, I just create a vUE based project and create a folder named test-loader in the root directory of the project. The folder name of my project is H5_pay. Therefore, the following command is executed:

# H5_pay is my own project name and this can be changed according to my own

cd h5_pay

mkdir test-loader && npm init

Copy the code

Then add the following code to index.js in the test-loader folder:

module.exports = function(content) {

  console.log('content',content)

  return content && content.replace(/terrence/gi.'Javascript Advanced Programming ')

}

Copy the code

This function takes a parameter, content, which represents the content of the matched file. If the content matches the word terrence, it is replaced with Javascript advanced programming.

Next, execute:

npm link test-loader

Copy the code

npm linkThis command puts the local test package innode_modulesIn the. The action you put in is actually a soft link or a hard link, it should be a soft link. As shown in figure:

After executing this command, restart the local service, open the page, and you’ll see that Terrence in your code has been replaced with Javascript advanced programming.


As for the parameter content received by the function in index.js, printing it out is the code of the whole vue file received, as shown in the figure:

What is the content

Another example is iView-loader

The main function of iView-loader is to replace components with the prefix I – with humps, such as i-affix with affix.

Iview-loader has two files, tag-map.js and loader.js.

Tag-map. js defines the mapping between prefixed components and humped components.

// tag-map.js

exports.tag = {

    'Switch': 'i-switch'.

    'Circle': 'i-circle'

};



exports.prefixTag = {

    'i-affix': 'Affix'.

    'i-alert': 'Alert'.

    'i-anchor': 'Anchor'.

    'i-anchor-link': 'AnchorLink'.

    'i-auto-complete': 'AutoComplete'.

    'i-avatar': 'Avatar'.

    'i-back-top': 'BackTop'.

    'i-badge': 'Badge'.

    'i-breadcrumb': 'Breadcrumb'.

    'i-breadcrumb-item': 'BreadcrumbItem'.

    'i-button': 'Button'.

    'i-button-group': 'ButtonGroup'.

    'i-card': 'Card'.

    'i-carousel': 'Carousel'.

    'i-carousel-item': 'CarouselItem'.

    'i-cascader': 'Cascader'.

.

};



Copy the code

Loader.js defines the substitution rules for component names and replaces them when matched to vue files.

// loader.js

"use strict";



const loaderUtils = require('loader-utils');

const { tag, prefixTag } = require('./tag-map');



function replaceTag(source, tagMap) {

    Object.keys(tagMap).forEach(i= > {

        source = source.replace(new RegExp(` <${i}(? ! -) `.'g'), ` <${tagMap[i]}`)

            .replace(new RegExp(` < \ /${i}> `.'g'), ` < \ /${tagMap[i]}> `);

    })

    return source;

}



module.exports = function (source) {

    const options = loaderUtils.getOptions(this);

    this.cacheable();



    let newSource = source;

    newSource = replaceTag(newSource, tag);



    if ('prefix' in options && options.prefix) {

        newSource = replaceTag(newSource, prefixTag);

    }



    return newSource;

};



Copy the code

The thing to notice hereA new package is referencedloader-utils. Loader-utils is a Webpack utility class that uses methods to work with loader to process files. The general content is as follows:This package is under developmentloaderIs very important.

conclusion

  • How do you develop one yourselfloader
  • Just a quick analysisiview-loader
  • To deepen theloaderThe understanding of the

One last word

  1. Move your rich little hands and “like it.”
  2. Move your rich little hands, “click here”
  3. All see here, might as well “add a follow”
  4. Might as well “forward”, good things to remember to share

Click on the link to add a follow