几个实用的自定义Webpack loader，速度背下来，进可开发退可面试~

引子

Webpack 是一个强大的模块打包工具

它可以处理各种类型的资源，并将它们转换为浏览器可以理解的代码

在这个过程中，Webpack 使用了一种叫做 "loader" 的机制

它允许你自定义如何处理特定类型的资源。

Lets Go！

自定义loader实例

以下是一些自定义 loader 的例子，包括它们的应用场景，详细注释和使用方法。

移除注释

应用场景：在生产环境中，我们可能希望移除源代码中的所有注释。

js 复制代码

module.exports = function(source) {
  // 使用正则表达式移除所有注释
  const result = source.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g,'');
  return `module.exports = ${JSON.stringify(result)}`;
};

添加版权声明

js 复制代码

module.exports = function(source) {
  // 添加版权声明
  const banner = `/* Copyright (c) 2022 Your Company */\n`;

  return banner + source;
};

转换 Markdown 到 HTML

应用场景：将 Markdown 文件转换为 HTML。

js 复制代码

const marked = require('marked');

module.exports = function(source) {
  // 使用 marked 库将 Markdown 转换为 HTML
  const html = marked(source);

  return `module.exports = ${JSON.stringify(html)}`;
};

国际化转译

应用场景：根据不同的语言环境，加载不同的语言包。

js 复制代码

module.exports = function(source) {

  // 根据环境变量 LOCALE 加载不同的语言包
  const locale = process.env.LOCALE || 'en';

  // 导入自定义的语言包 /i18n/en.json
  const translations = require(`./i18n/${locale}.json`);

  // 将i18n: xxx 中的xxx 转化为英语
  return source.replace(/\[i18n: (.+?)\]/g, (match, key) => translations[key]);
};

源码转可执行函数

应用场景：将模板文件转换为可执行的 JavaScript 函数。

js 复制代码

const _ = require('lodash');

module.exports = function(source) {
  // 使用 lodash 的 template 功能将模板转换为函数
  const compiled = _.template(source);

  return `module.exports = ${compiled}`;
};

鲁大师牛逼！

代码格式化

应用场景：在编译过程中进行代码美化，如 Prettier。

js 复制代码

const prettier = require('prettier');

module.exports = function(source) {
  // 使用 Prettier 进行代码美化
  return prettier.format(source, { semi: false, parser: "babel" });
};

批量替换环境变量

应用场景：批量替换源码中的环境变量。

js 复制代码

module.exports = function(source) {
  // 获取环境变量 NODE_ENV
  const env = process.env.NODE_ENV || 'development';

  return source.replace('process.env.NODE_ENV', JSON.stringify(env));
};

添加时间戳

应用场景：在文件的顶部添加时间戳。

js 复制代码

module.exports = function(source) {
  // 获取当前时间戳
  const timestamp = new Date().toISOString();

  return `// Generated at ${timestamp}\n` + source;
};

转换大小写

应用场景：将所有的文本转换为大写。

js 复制代码

module.exports = function(source) {
  // 将所有文本转换为大写
  return source.toUpperCase();
};

添加函数包装

应用场景：在代码外部添加一个自执行函数，以防止变量污染全局作用域。

js 复制代码

module.exports = function(source) {
  // 在代码外部添加一个自执行函数
  return `(function() {\n${source}\n})();`;
};

添加函数调用日志

应用场景：在每个函数调用前添加日志，用于调试。

js 复制代码

module.exports = function(source) {
  // 在每个函数调用前添加日志
  return source.replace(/(\w+)\(/g, function(match, p1) {
    return `console.log('Calling ${p1}');\n` + match;
  });
};

批量替换关键词

应用场景：将源代码中的特定关键词替换为其他文本。

js 复制代码

module.exports = function(source) {
  // 将所有的 "StupidPM" 替换为 "亲耐滴产品童鞋"
  return source.replace(/StupidPM/g, '亲耐滴产品童鞋');
};

这个loader你可以进行二次封装，接收要替换的目标关键词，然后动态生成！

移除特定代码

应用场景：移除源代码中的所有 TODO 语句。

js 复制代码

module.exports = function(source) {
  // 移除所有的 TODO 语句
  return source.replace(/TODO/g, '');
};

应用自定义Loader

首先，你需要将这些 loader 保存为单独的文件，然后在 webpack 配置中使用它们。例如，你可以将 "移除注释 Loader" 保存为 remove-comments-loader.js，然后在 webpack 配置中这样使用：

js 复制代码

module: {
  ...
  rules: [
    {
      test: /\.js$/,
      use: [
        {
          loader: [
              "babel-loader",
              path.resolve(__dirname, 'remove-comments-loader.js')
          ],
        },
      ],
    },
    ...
  ],
  ...
},

这里的 path.resolve(__dirname, 'remove-comments-loader.js') 是 loader 文件的绝对路径。你需要将 'remove-comments-loader.js' 替换为你的 loader 文件名。

js 复制代码

module: {
  ...
  rules: [

    {
      test: /\.js$/,
      use: [
        ...
        {
          loader: path.resolve(__dirname, 'add-copyright-loader.js'),
        },
        ...
      ],
    },
    ...
  ],
},

js 复制代码

module: {
  rules: [
    {
      test: /\.js$/,
      use: [
        {
          loader: path.resolve(__dirname, 'add-copyright-loader.js'),
        },
        {
          loader: path.resolve(__dirname, 'remove-comments-loader.js'),
        },
      ],
    },
    ...
  ],
},

写在最后

以上就是关于自定义 webpack loader 的一些基本知识和示例。希望这些信息能帮助你更好地理解和使用 webpack loader，以满足你的特定需求。

记住，loader 是 webpack 的核心特性之一，掌握它们将极大地提升你的 webpack 使用效率。

祝你编程愉快！