webpack5自定义loader

2021-11-07

webpack自定义loader

loader本质就是一个函数
函数接受三个参数content soucemap meta

接下来开始搭建环境

npm init -y 初始化package.json

安装webpack环境 npm install webpack webpack-cli -D
新建src目录下在建 main.js

main.js里面简单放一些代码

1 2	//main.js console.log('hello webpack Loader')

新建webpack配置文件 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/mian.js',
  output: {
    filename: 'bound.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  }
};

在package.json的script中新增脚本

1
2
3

"scripts": {
   "build": "webpack"
 },

终端运行 npm run build测试是否可以完成打包
ok可以完成打包
开始自定义loader, 新建myloader文件夹里面存放自己的loader
新建my-loader01.js

//my-loader01.js
// 上面说的 loader就是一个函数 接受三个参数  webpack在执行loader的时候 会把参数传入loader中
module.exports = function (content, soucemap, meta) {
  console.log(content, 'my-loader01');
  return content;
};

以上就是一个简单的loader
测试loader
在webpack.config.js中配置loader,配置完成代码如下:

const path = require('path');

module.exports = {
  entry: './src/mian.js',
  output: {
    filename: 'bound.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/i,
        use: './my-loader/my-loader01.js',
      },
    ],
  },
};

开始运行npm run build看自定义loader是否可以运行,
自定义多个loader,可以看到loader的执行顺序使从下往上执行的

rules: [
      {
        test: /\.js$/i,
        use: ['./my-loader/my-loader01.js','./my-loader/my-loader02.js','./my-loader/my-loader03.js'],
      },
    ],

执行结果:

实际上自定义的loader有两种上面的使其中一种叫做:normal Loader 另外一种叫pitch Loader

module.exports = function (content) {
  return someSyncOperation(content, this.data.value);
};

module.exports.pitch = function (remainingRequest, precedingRequest, data) {
  data.value = 42;
};

注意: pitch Loader的执行顺序与 normal Loader的执行顺序相反

ok上面介绍了如何自定义loader,倒是配置loader的时候不太舒服

来优化一下

rules: [
      {
        test: /\.js$/i,
        use: ['./my-loader/my-loader01.js','./my-loader/my-loader02.js','./my-loader/my-loader03.js'],
      },
    ],

每次使用lodaer的时候都需要写相对路径,有没有什么办法可以直接写loader名就可以了呢? 有的,看我操作

module中有一个配置: resolveLoader(默认配置如下)

resolveLoader: {
    modules: ['node_modules'],
    extensions: ['.js', '.json'],
    mainFields: ['loader', 'main'],
  },

修改一下(在module的数组中,把自定义loader存放的文件夹添加进去)

resolveLoader: {
    modules: ['node_modules', 'my-loader'],
    extensions: ['.js', '.json'],
    mainFields: ['loader', 'main'],
  },

在来看一下webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/mian.js',
  output: {
    filename: 'bound.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/i,
        use: [
          'my-loader01',
          'my-loader02',
          'my-loader03',
        ],
      },
    ],
  },
  resolveLoader: {
    modules: ['node_modules', 'my-loader'],
    extensions: ['.js', '.json'],
    mainFields: ['loader', 'main'],
  },
};

使用loader的时候已经可以不写路径了
运行npm run build打包之后依然可以正确输出loader信息

了解更多