面试题：Webpack开发环境配置中如何实现自定义的模块加载逻辑

Question

在Webpack开发环境里，默认的模块加载逻辑有时无法满足复杂业务需求。请说明如何编写自定义的模块加载器（loader）和插件（plugin）来实现自定义的模块加载逻辑，举例说明在特定场景下如何运用这种自定义逻辑解决实际问题。

Answer 1

编写自定义模块加载器（loader）

1. 创建loader文件：
   • loader本质上是一个函数，它接受源文件的内容作为参数，并返回转换后的内容。例如，创建一个名为myLoader.js的文件。
   • 以下是一个简单的将文本内容转为大写的loader示例：

module.exports = function (source) {
    return source.toUpperCase();
};

2. 配置Webpack使用loader：
   • 在webpack.config.js中配置module.rules，指定使用自定义的loader。例如：

module.exports = {
    module: {
        rules: [
            {
                test: /\.txt$/, // 匹配txt文件
                use: path.resolve(__dirname, 'myLoader.js')
            }
        ]
    }
};

编写自定义插件（plugin）

1. 创建插件类：
   • 插件是一个具有apply方法的JavaScript对象。例如，创建一个名为MyPlugin.js的文件。
   • 以下是一个简单的在webpack构建开始时打印日志的插件示例：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.run.tap('MyPlugin', compilation => {
            console.log('Webpack 构建开始！');
        });
    }
}
module.exports = MyPlugin;

2. 配置Webpack使用插件：
   • 在webpack.config.js中的plugins数组里添加自定义插件的实例。例如：

const MyPlugin = require('./MyPlugin.js');
module.exports = {
    plugins: [
        new MyPlugin()
    ]
};

特定场景运用示例

场景：项目中有一些国际化的文本文件（.i18n格式），需要将这些文件内容根据配置转换为不同语言的JSON文件，供前端JavaScript使用。

1. 自定义loader实现：
   • 创建i18nLoader.js，根据配置文件解析.i18n文件内容并转换为JSON格式。

const fs = require('fs');
const path = require('path');
module.exports = function (source) {
    // 假设配置文件路径
    const configPath = path.resolve(__dirname, 'i18n.config.json');
    const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
    // 解析source内容，根据配置转换为JSON
    let json = {};
    // 简单示例，假设source是每行 key = value 格式
    const lines = source.split('\n');
    lines.forEach(line => {
        const parts = line.split('=');
        if (parts.length === 2) {
            const key = parts[0].trim();
            const value = parts[1].trim();
            // 根据配置转换value
            json[key] = value.replace('{lang}', config.lang);
        }
    });
    return JSON.stringify(json);
};

2. Webpack配置使用：
   • 在webpack.config.js中配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.i18n$/,
                use: path.resolve(__dirname, 'i18nLoader.js')
            }
        ]
    }
};

通过这种自定义的模块加载器，就可以将.i18n文件内容按需求转换为JSON格式，满足国际化业务的实际需求。