webpack课程笔记2 -- 自定义 loader

创建⼀个替换源码中字符串的loader

 

//   index.js
console.log("hello 老韩");

 


//  replaceLoader.js

//  函数 声明式函数   不可以是 箭头函数

//  函数 必须有返回值

//  需要⽤声明式函数,因为要用到上下⽂的this,⽤到this的数据,该函数接受⼀个参数,是源码
module.exports = function(source) {
       console.log(source, this, this.query);
       return source.replace('老韩', this.query.name)
};

 

//  使用 this.callback

//  this.callback :如何返回多个信息,不⽌是处理好的源码呢,可以使⽤this.callback来处理

//  this.callback(
//      err: Error | null,
//      content: string | Buffer,
//      sourceMap?: SourceMap,
//      meta?: any
// )

module.exports = function(source) {
       const res = source.replace('老韩', this.query.name)

       this.callback(null,  res)
};

 

//  处理异步逻辑

//  this.async:如果loader⾥⾯有异步的事情要怎么处理呢

module.exports = function(source) {
      //定义⼀个异步处理,告诉webpack,这个loader⾥有异步事件,在⾥⾯调⽤下这个异步
      //callback 就是 this.callback 注意参数的使⽤
      const callback = this.async();
      setTimeout(() => {
                   const result = source.replace('老韩', this.query.name)
                   callback(null, result);
       }, 3000);
};

 

 

在配置⽂件中使⽤loader

//需要使⽤node核⼼模块path来处理路径
const path = require('path')


module: {
     rules: [
          {
                test: /\.js$/,
                use: {

                       loader: path.resolve(__dirname, "./loader/replaceLoader.js"),

                       options: {

                              name:  "韩明洋"

                       }

                }
          }
     ]
},

 

 

多个loader的使⽤

//replaceLoader.js
module.exports = function(source) {
         return source.replace("老韩", this.query.name);
};

 

//replaceLoaderAsync.js
module.exports = function(source) {
             //定义⼀个异步处理,告诉webpack,这个loader⾥有异步事件,在⾥⾯调⽤下这个异步
             const callback = this.async();
             setTimeout(() => {
                   const result = source.replace("老韩", this.query.name);
                   callback(null, result);
             }, 3000);
};

 

//webpack.config.js

const path = require('path')

 

//  处理loader的路径问题  默认有一个  node_modules

resolveLoader: {
          modules: ["node_modules", "./loader"]
},
module: {
     rules: [
          {
                test: /\.js$/,

                //   loader默认顺序,⾃下⽽上,⾃右到左
                use: [

                     "replaceLoader",

                     {                            

                              loader: "replaceLoaderAsync",

                              options: {

                                    name:  "韩明洋"

                              }

                     }

               ]
          }
     ]
},

 

 

自定义  less-loader、 css-loader、 style-loader

 

less-loader.js

 

const less = require("less")

 

module.exports = function (source) {

  less.render(source, (e, output) => {

    this.callback(e, output.css)

  })

}



css-loader

 

module.exports = function (source) {

  return JSON.stringify(source);

};

 

style-loader

 

module.exports = function (source) {

  const str = ` const el = document.createElement('style');

                el.innerHTML = ${source};

                document.head.appendChild(el);

              `

  return str

}

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页