面试题：Webpack入口与出口配置的常见错误及解决方法

Question

在Webpack的入口与出口配置过程中，经常会遇到一些问题。请列举至少两个常见错误，并阐述相应的解决办法。例如在配置多入口时可能出现打包文件命名混乱的情况，你会如何解决？

Answer 1

常见错误一：入口文件路径错误

1. 问题描述：在配置 entry 时，指定的入口文件路径不正确，Webpack 无法找到该文件，导致打包失败。
2. 解决办法：仔细检查入口文件的路径是否正确，确保路径是相对于项目根目录（如果使用相对路径），或者使用绝对路径来指定入口文件，例如：

module.exports = {
    entry: path.resolve(__dirname, 'src/index.js')
};

常见错误二：出口配置中文件名重复

1. 问题描述：在多入口配置中，如果出口文件名设置不合理，可能会导致不同入口打包后的文件重名，覆盖原有文件。
2. 解决办法：可以使用占位符来区分不同入口的打包文件，例如使用 [name] 占位符，它会被替换为入口文件的名称。示例如下：

module.exports = {
    entry: {
        app1: './src/app1.js',
        app2: './src/app2.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

常见错误三：打包输出目录错误

1. 问题描述：配置 output.path 时，设置的输出目录不正确，导致打包后的文件没有输出到预期位置，或者输出目录不存在而引发错误。
2. 解决办法：确保 output.path 设置的是一个存在且可写的目录路径。可以使用 path.resolve 方法来生成绝对路径，同时在打包前可以通过 Node.js 的 fs 模块检查目录是否存在，不存在则创建。示例如下：

const path = require('path');
const fs = require('fs');
const outputDir = path.resolve(__dirname, 'dist');
if (!fs.existsSync(outputDir)){
    fs.mkdirSync(outputDir);
}
module.exports = {
    output: {
        path: outputDir,
        filename: 'bundle.js'
    }
};