webpack：自定义loader

以下是一个自定义loader replace-loader，实现一个类似模板引擎变量替换的简单功能

文件目录

.
├── dist
│   └── index.js # 打包结果
├── loaders
│   └── replace-loader.js   # 自定义loader
├── src
│   └── index.js # 要打包的文件入口
├── package.json # 依赖配置
└── webpack.config.js # 打包配置

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

package.json

{
  "name": "loader-demo",
  "version": "1.0.0",
  "description": "a webpack loader demo",
  "scripts": { "build": "webpack"
  }, "devDependencies": { "loader-utils": "^2.0.0", "webpack": "^5.47.0", "webpack-cli": "^4.7.2"
  }
}
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

webpack.config.js

'use strict';

const path = require('path');

module.exports = {
  // 打包入口
  entry: { index: './src/index.js',
  }, // 指定输出地址及打包出来的文件名
  output: { path: path.join(__dirname, 'dist'), filename: '[name].js',
  }, // Loader路径
  resolveLoader: { modules: ['node_modules', './loaders'],
  }, module: { rules: [ { test: /.js$/, use: { loader: 'replace-loader', // 传递参数 options: { name: 'Tom', }, }, }, ],
  }, // 开发环境
  mode: 'production',
};
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
 

loaders/replace-loader.js

const loaderUtils = require('loader-utils');

module.exports = function (source) {
  // 获取参数
  let options = loaderUtils.getOptions(this); for (let [key, value] of Object.entries(options)) { source = source.replace(`{{${key}}}`, value);
  } return source;
};
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

src/index.js

console.log('hi {{name}}');

  
 

  
1
 

指定打包命令

$ npm run build

  
 

  
1
 

dist/index.js

console.log("hi Tom");

  
 

  
1
 

参考
面试官：请实现一个Sass-Loader

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/119173501