面试题：Webpack 自定义 loader 的开发及应用场景

Question

请说明如何开发一个自定义的 Webpack loader，该 loader 用于将特定格式的文本文件内容进行加密处理后再输出。并阐述在实际项目中，这种自定义 loader 可能的应用场景。

Answer 1

开发自定义 Webpack loader 实现文本文件加密处理

1. 创建 loader 文件：
   • 在项目中创建一个新的 JavaScript 文件，例如 encryptLoader.js。
   • 一个基本的 Webpack loader 是一个函数，该函数接受 source 参数，即文件的原始内容。

   module.exports = function(source) {
       // 加密逻辑放在这里
       return encryptedSource;
   };
   

2. 实现加密逻辑：
   • 假设使用简单的替换加密方式（实际项目中应使用更安全的加密算法，如 AES 等）。例如，将每个字符替换为其 ASCII 码值加 1 的字符。

   module.exports = function(source) {
       let encryptedSource = '';
       for (let i = 0; i < source.length; i++) {
           let charCode = source.charCodeAt(i);
           encryptedSource += String.fromCharCode(charCode + 1);
       }
       return encryptedSource;
   };
   

3. 配置 Webpack 使用自定义 loader：
   • 在 webpack.config.js 文件中配置 module.rules。

   module.exports = {
       //...其他配置
       module: {
           rules: [
               {
                   test: /\.txt$/, // 匹配特定格式的文本文件，这里假设是.txt 文件
                   use: path.resolve(__dirname, 'encryptLoader.js')
               }
           ]
       }
   };
   

实际项目中可能的应用场景

1. 保护敏感配置文件：
   • 项目中可能有包含敏感信息（如 API 密钥、数据库密码等）的配置文件。通过自定义加密 loader，可以在打包过程中对这些配置文件进行加密，防止在代码仓库或部署过程中敏感信息泄露。只有在运行时，应用程序使用相应的解密逻辑才能获取真实的配置信息。
2. 知识产权保护：
   • 如果项目中有一些文本形式的核心算法说明、技术文档等，不想让他人轻易获取原始内容。可以使用这种加密 loader 在打包时对这些文件加密，确保只有在应用程序内部可以正确解密查看，保护知识产权。
3. 数据安全传输：
   • 在前端项目向服务器传输一些文本数据文件时，在打包阶段先通过加密 loader 加密，服务器端再解密。这样即使数据在传输过程中被拦截，攻击者也难以获取原始内容，增强数据传输的安全性。