webpack：自定义loader

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

{
  "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"
  }
}

'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',
};

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;
};

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

$ npm run build

console.log("hi Tom");