Let's customize the loader

loader stay webpack Compilation plays a very important role , Used to convert the source code of the module , such as css-loader take css The code is processed into a string ,style-loader establish style The label will css Code added to html On the page .

Customize loader

newly build node project , stay src Under folder index.js Simply write some code in

const user = {
  name: 'alice',
  age: 20,
};

establish loaders Folder , Add to the folder for processing loader Of js file , adopt module.exports Function can get the contents of the file to be processed , And return the processed results

module.exports = function (content) {
    
  console.log('ice-loader>>', content);
  return content + '"@author icecream"';
};

In profile webpack.config.js Introduce custom loader . Definition loader There are two ways

• Introduce... Through relative paths （ The way it's used here ）
• adopt resolveLoader Attribute configuration , Default will go node_modules Query dependency

//  Other configurations are omitted 
module: {
    
    rules: [
      {
    
        test: /\.js/i,
        use: ['./loaders/ice-loader'],
      },
    ],
  },

adopt webpack Compile the file , Output the obtained file content on the console , The compiled file is customized loader What's coming back .

Synchronous asynchronous loader

adopt loader The processed data needs to be returned javscript character string , There are two ways

• return Statement returns the content
• this.callback Returns the function content

When encountering asynchronous return , Using the above two methods directly will report an error

Need to pass through this.async Function to make the process asynchronous ,this.callback The first parameter receives error, If there is no error, pass null, Other parameters are related to loader in module.exports The obtained parameters are the same

babel-loader

babel-loader Handle js The code relies on babel This tool , We can also easily implement one , named ice-babel-loader, Use babel You need to go through plugin perhaps presets Define processing rules

{
    
  test: /\.js/i,
  use: [
    {
    
      loader: './loaders/ice-babel-loader',
      options: {
    
        presets: ['@babel/preset-env'],
      },
    },
  ],
},

babel The core library of tools is @babel/core, Defining processing rules requires presets @babel/preset-env, In turn, installation

const babel = require('@babel/core');

module.exports = function (content) {
    

  const options = this.getOptions(); //  obtain loader As defined in options
  const callback = this.async();
  
  babel.transform(content, options, (err, result) => {
    
    if (err) callback(error);
    callback(null, result.code);
  });
};

So we define ice-babel-loader will es6 The grammar of is changed to es5

md-loader

Markdown It's a lightweight markup language , It allows people to write documents in plain text format that is easy to read and write , And then convert it into effective XHTML（ perhaps HTML） file .

that md Whether the document can pass loader convert to html Documents ？ The answer is yes , There are already some useful libraries that provide us with this function .

marked Used for processing markdown File format ,highlight.js For giving markdown The code in the file sets the style

const {
     marked } = require('marked');
const hljs = require('highlight.js');

module.exports = function (content) {
    
  //  to markdown Add code in class attribute 
  marked.setOptions({
    
    highlight: function (code, lang) {
    
      return hljs.highlight(lang, code).value;
    },
  });
  const htmlContent = marked(content);
  return htmlContent;
};

At this point through md-loader The returned string is a normal string , Can not be javascript Identified by code , It also needs to go through html-loader Handle .

{
    
    test: /\.md/i,
    use: ['html-loader', './loaders/md-loader'],
},

adopt loader After processing the md The file is exported javascript character string , So it can be directly added to body View the effect , In addition, the style display of code needs to be introduced highlight.js Medium css file

// index.js
import code from './doc.md';
import 'highlight.js/styles/default.css';
document.body.innerHTML = code;

such markdown The file can be parsed into html On the page

summary

• Customize loader adopt module.exports Get resource content , After a series of processing and return the processed results .
• self-written loader You can set up folders locally to process resources , After development, it will be released to npm The warehouse can directly reference by downloading packages loader.

That's about Customize loader Introduction to , More information about webpack You can refer to my other blog posts , Ongoing update ~