1. Functions of loader

Loader is also called module converter. In other words, the input to the module to the content is converted to the output of the feature itself (a bit like Vue filtering). At the same time, all loader functions are single, they only care about their own input and output. Similarly, loader has the ability to invoke chained transformations (a bit like promise then, if you want to know more about this section, you can see the implementation of promise in my other article.)

2. Rules for using multiple Loaders

  • From right forward
  • From the bottom up

From right forward

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader"."css-loader"."less-loader"],}};Copy the code

Note: When executing this rule, we first execute less-loader to convert less files to CSS. The CSS -loader will process @import and URL () in the CSS, and give the processed file to style-loader, which then inserts the CSS into the DOM.

From the bottom up

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                strictMath: true,},},},],},};Copy the code

Run the following operations from bottom to top: less-loader, CSS-loader, and style-loader. It is easy to understand the order of loader execution and the function of each loader.

Note: The loader is executed from right to left and from bottom to top. The loading sequence of loader is left to right and top to bottom. However, if the pitch loader returns during loading, it will not continue the backward loading. Instead, it will immediately execute the previous loader of the current loaded loader, and then execute it back in the order of execution.

There’s a lot more to this piece, which I’ll cover in detail in a later Loader article, but just keep this conclusion in mind for now.

3. Implement your own babel-loader

The essence of a loader is to convert input to a module into content and output it to a feature. This is very similar to vue’s filtering. Therefore, we can actually define loader as a function.

function loader(source){
	// coding
}
module.exports = loader;

Copy the code

Know yourself and know your enemy, and you can win a hundred battles. Next, let’s learn about the loader we wrote today

npm install @babel/core label-loader @babel/preset-env -D
Copy the code

This is what we do when we convert es6+ syntax to ES5 syntax.

  • @babel/preset-env turns our high-version grammar into low-version grammar

  • Label-loader This package allows you to convert JavaScript files using Babel and Webpack.

  • @babel/core Babel core package

Label-loader builds a bridge between @babel/preset-env and @babel/core, and converts @babel/preset-env advanced syntax to output data. Convert to input data that @babel/core can understand.

1. Get the Babel preset (input parameters)

 module: {
       rules: [
           {
               test: /\.js$/,
               use: {
                   loader: 'babel-loader',
                   options: {
                       presets: [
                           '@babel/preset-env'}}}]}Copy the code

This piece of code is quite common in the webpack.config.js directory. Optionss is the loader configuration parameter, we need to get these and preset to display, use @babel/preset-env. So it’s easy to get code…

let babel = require('@babel/core'// Help get the parameters passed inlet loaderUtils = require('loader-utils')
function loader(source) {// Get the input parameterslet options = loaderUtils.getOptions(this);
    return source
} 

module.exports = loader
Copy the code

2. Convert advanced syntax, get the result of advanced syntax conversion, and return the result

let babel = require('@babel/core'// Help get the parameters passed inlet loaderUtils = require('loader-utils')
function loader(source) {// Get the input parametersletoptions = loaderUtils.getOptions(this); // The procedure that returns the result is asynchronous and requires a call to the APIlet cb = this.async()
    babel.transform(source, {... // Generate sourcemap file sourcemap:true
    },function(err,result) {// If Babel provides the ast abstract syntax tree after conversion, Webpack will directly use the syntax tree provided by your loader without having to convert code to the tree itself // asynchronous process cb(err,result.code,result.map) }) } module.exports = loaderCopy the code

This is the loader in WebPack that looks awesome and hard to understand. You also understand the laoder core of Weback.

If you find this article helpful, can you like it and buy a follow? I am writing an article about the college recruitment interview recently, welcome to follow my official account to ask questions.

Pay attention to me [clever and lovely small Xuan Xuan], let you learn the front end easier.