webpack(6) loader

webpack做的事情, 仅仅是分析各个模块间的依赖关系, 将chunk里的资源合并成资源列表, 然后输出打包文件;

更多的事情, 需要loader和plugin来完成;

 一.  loader

         本质是一个函数, 它的作用是将某个源码字符串转换成为另一个源码字符串.

 

loaders执行过程:在webpack读取文件之后, 经过loader后形成转换后的代码, 然后交给AST分析

 

 

 

处理loaders流程

 

 

 在webpack.config.js中配置loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,//匹配规则
        use: [        //用什么处理, 可以写多个loader
          { loader: "xxloader" }  //loader的路径,webpack内部会用require(loader的路径)来获取该loader函数
        ]
      }
    ]
  },

 

练习: 自己手写一个简单的loader, 实现"变量 a = 1" 跑起来, 也就是将 "变量" 换成 "var";

 1. loader本质就是一个函数, 所以创建一个文件, 导出一个函数. 注意不能用es6导出, 要用commonjs导出,

     因为此时是nodejs运行环境.

 

 

 

 

//myloader.js

module.exports = function(sourcecode){ //参数表示该loader处理前的源码
  console.log(sourcecode);
     return sourcecode.replace(/变量/g,"var");//return结果就是该loader处理后的源码
}

2. 配置webpack.config.js中配置该loader

//webpack.config.js
const path = require("path");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,//匹配规则
        use: [        //用什么处理, 可以写多个loader
          { loader: "./src/myloader/myloader.js" }  //loader的路径
        ]
      }
    ]
  },
  devtool: "source-map",
  mode: "development",
  entry: {
    index: "./src/index.js"
  },
  output: {
    filename: "[name].[chunkhash:5].js",
    path: path.resolve("./", "output")
  }

}

 

这样配置后, 就可以针对所有js文件进行转换了.

loader的参数: 有两种写法, 一种是写在options里, 一种可以直接写在loader后用?xx=yy这种形式;

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,//匹配规则
        use: [        //用什么处理, 可以写多个loader
// 第一种:
          // { loader: "./src/myloader/myloader.js" },  //loader的路径
// 第二种:
          // {
          //   loader: "./src/myloader/myloader2.js",
          //   options:{
          //     changevalue: "我的吧"
          //   }
          // }
// 第三种:
          {loader:"./src/myloader/myloader2.js?changevalue=我的吧"}
        ]
      }
    ]
  },

 

//loader2.js 可以获取webpack.config.js中loader的配置
const { getOptions } = require("loader-utils");

module.exports = function (sourcecode) {
  const options = getOptions(this)
  console.log(options);
  var reg = new RegExp(options.changevalue, "g");
  return sourcecode.replace(reg, "var");
}

 

loader们的执行顺序, 从下往上, 从右向左.与加载顺序相反