面试题：Webpack与ESLint集成自定义规则的实际应用场景

Question

假设你正在开发一个大型前端项目，使用Webpack和ESLint。请举例说明至少两个适合使用自定义ESLint规则的实际场景，并阐述如何通过Webpack的配置来确保这些自定义规则在整个项目构建过程中生效。

Answer 1

适合使用自定义ESLint规则的实际场景

1. 特定业务逻辑代码规范：例如，在一个电商项目中，商品价格相关的计算函数命名必须遵循特定规则，如以calculateProductPrice开头，以确保代码的可读性和可维护性。这样当团队成员开发与价格计算相关功能时，能够快速识别和使用正确的函数。
2. 团队代码风格统一：假设团队决定所有的CSS类名命名必须采用BEM规范，但ESLint默认规则不包含此检查。通过自定义规则，可以强制所有前端开发人员在编写HTML模板和CSS时遵循BEM命名约定，使得整个项目的代码风格更加统一，便于后期维护和新人接手。

通过Webpack配置确保自定义规则生效

1. 安装必要依赖：首先确保项目中安装了eslint、eslint - webpack - loader以及用于自定义规则的eslint - rule - creator（可根据实际情况选择）。

npm install eslint eslint - webpack - loader eslint - rule - creator --save - dev

2. 创建自定义ESLint规则：在项目根目录下创建一个eslint - rules目录，在其中编写自定义规则文件。例如，创建一个custom - naming - rule.js文件：

module.exports = {
    meta: {
        type: 'problem',
        docs: {
            description: 'Enforce custom naming convention',
            category: 'Custom Rules',
            recommended: true
        },
        fixable: null,
        schema: []
    },
    create(context) {
        return {
            // 根据实际场景编写AST节点检查逻辑
        };
    }
};

3. 配置ESLint：在.eslintrc.js文件中引入自定义规则：

module.exports = {
    // 其他已有配置
    rules: {
        'custom - naming - rule': 'error'
    },
    plugins: [
        // 假设自定义规则放在eslint - rules目录，需配置相对路径
        path.resolve(__dirname, 'eslint - rules')
    ]
};

4. Webpack配置：在webpack.config.js中添加eslint - webpack - loader：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'eslint - webpack - loader',
                enforce: 'pre'
            }
        ]
    }
};

通过以上步骤，Webpack在构建过程中，会先使用eslint - webpack - loader对JavaScript文件进行ESLint检查，确保自定义规则在整个项目构建过程中生效。