面试题：Webpack中如何实现入口的动态配置

Question

在Webpack项目里，假设你有多个页面，每个页面都有独立的入口文件。请阐述如何动态配置入口，让Webpack能正确处理这些入口文件，并给出相应的代码示例。

Answer 1

动态配置入口思路

1. 获取入口文件路径：通过Node.js的文件系统模块（fs）读取存放入口文件的目录，获取所有入口文件的文件名和路径。
2. 构建入口对象：根据获取到的入口文件路径，构建符合Webpack入口格式的对象，对象的键为入口名称（通常为文件名），值为入口文件的路径。

代码示例

const path = require('path');
const fs = require('fs');

// 获取入口文件目录
const entryDir = path.resolve(__dirname, 'src/entries');

// 读取目录下所有文件
const entryFiles = fs.readdirSync(entryDir);

// 构建入口对象
const entries = {};
entryFiles.forEach(file => {
    const name = file.split('.')[0];
    const filePath = path.resolve(entryDir, file);
    entries[name] = filePath;
});

module.exports = {
    entry: entries,
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    // 其他Webpack配置...
};

上述代码中：

1. 首先通过fs.readdirSync读取指定目录下的所有文件。
2. 然后遍历这些文件，将文件名作为入口名称，文件完整路径作为入口文件路径，构建entries对象。
3. 最后将entries对象作为Webpack配置中的entry属性值，Webpack就能正确处理这些入口文件，并且在输出时每个入口文件会对应生成一个[name].js文件。