# How to Configure eslint-config-airbnb with Webpack: Complete Integration Guide

> Seamlessly integrate eslint-config-airbnb with Webpack. Follow our guide to install dependencies, configure ESLint, and set up eslint-webpack-plugin for style guide enforcement.

- Repository: [Airbnb/javascript](https://github.com/airbnb/javascript)
- Tags: how-to-guide
- Published: 2026-02-24

---

**To configure eslint-config-airbnb with Webpack, install the config and its peer dependencies, extend `"airbnb"` in your [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json), and add `eslint-webpack-plugin` to your [`webpack.config.js`](https://github.com/airbnb/javascript/blob/main/webpack.config.js) to enforce Airbnb's style rules during the bundling process.**

The `airbnb/javascript` repository provides one of the most widely adopted ESLint configurations in the JavaScript ecosystem, enforcing strict code quality standards for modern React and Node.js applications. When you configure eslint-config-airbnb with Webpack, you integrate these rigorous linting rules directly into your build pipeline, catching style violations and import errors before they reach production.

## Understanding the Airbnb ESLint Configuration Structure

The `eslint-config-airbnb` package exports a comprehensive rule set that extends the base configuration (`eslint-config-airbnb-base`) with React-specific linting rules. According to the usage description in the package README at [`packages/eslint-config-airbnb/README.md`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/README.md) (lines 7-14), you can extend `"airbnb"` for the full rule set or `"airbnb/hooks"` to include React Hooks validation.

For Webpack-based projects, the configuration includes specific safeguards against common bundler anti-patterns. The base rule set explicitly forbids inline loader syntax through the `import/no-webpack-loader-syntax` rule defined in [`packages/eslint-config-airbnb-base/rules/imports.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/rules/imports.js) (lines 88-91). Additionally, the configuration recognizes standard Webpack filenames like [`webpack.config.js`](https://github.com/airbnb/javascript/blob/main/webpack.config.js) and `webpack.config.*.js` as development dependencies, exempting them from the `import/no-extraneous-dependencies` rule (lines 82-86).

## Step-by-Step Integration Guide

### Install Dependencies

Use the included install script to automatically add the config and its required peer dependencies:

```bash
npx install-peerdeps --dev eslint-config-airbnb

```

This command installs `eslint`, `eslint-plugin-import`, `eslint-plugin-react`, `eslint-plugin-react-hooks`, and `eslint-plugin-jsx-a11y` with compatible versions.

### Configure ESLint

Create or update your [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json) to extend the Airbnb configuration:

```json
{
  "extends": ["airbnb", "airbnb/hooks"],
  "env": {
    "browser": true,
    "node": true
  }
}

```

The `"airbnb"` entry automatically applies the Webpack-specific import rules, including the prohibition against inline loader syntax.

### Integrate ESLint with Webpack

Add `eslint-webpack-plugin` to your build process to lint files during compilation. First, install the plugin:

```bash
npm install --save-dev eslint-webpack-plugin

```

Then configure it in your [`webpack.config.js`](https://github.com/airbnb/javascript/blob/main/webpack.config.js):

```javascript
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ... existing configuration
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new ESLintPlugin({
      extensions: ['js', 'jsx'],
      eslintPath: require.resolve('eslint'),
    }),
  ],
};

```

The plugin reads your [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json) configuration, applying Airbnb's rules to all specified extensions during the build.

### Handle Webpack Loader Syntax (Optional)

If your project requires inline loader syntax (e.g., `import img from 'url-loader!./logo.png'`), you must explicitly disable the corresponding rule:

```json
{
  "rules": {
    "import/no-webpack-loader-syntax": "off"
  }
}

```

However, the Airbnb style guide recommends keeping loader configuration in your Webpack config files rather than source imports.

## Key Webpack-Specific Rules in the Airbnb Config

**Import/No-Webpack-Loader-Syntax**: This rule is enabled by default in [`packages/eslint-config-airbnb-base/rules/imports.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/rules/imports.js) to prevent inline loader usage like `!loader-name!./resource`, ensuring imports remain bundler-agnostic in source code.

**Import/No-Extraneous-Dependencies**: The configuration automatically ignores [`webpack.config.js`](https://github.com/airbnb/javascript/blob/main/webpack.config.js) and `webpack.config.*.js` patterns when checking for extraneous dependencies, allowing these files to import devDependencies like `webpack`, `webpack-merge`, or loaders without triggering linting errors.

## Summary

- **Install** `eslint-config-airbnb` using `npx install-peerdeps` to ensure all peer dependencies are compatible.
- **Extend** `"airbnb"` or `"airbnb/hooks"` in your [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json) to activate the rule set, including Webpack-specific import validations.
- **Integrate** `eslint-webpack-plugin` into your [`webpack.config.js`](https://github.com/airbnb/javascript/blob/main/webpack.config.js) to enforce linting during the build process.
- **Respect** the `import/no-webpack-loader-syntax` rule by keeping loader configuration in Webpack config files rather than inline imports.
- **Leverage** automatic devDependency recognition for files matching `webpack.config.*.js` patterns.

## Frequently Asked Questions

### Does eslint-config-airbnb work with Webpack 5?

Yes. The `eslint-config-airbnb` package is bundler-agnostic and works with any Webpack version. The configuration focuses on JavaScript and React code quality rather than bundler internals, though it does include specific rules to prevent Webpack-specific syntax in source files. Use `eslint-webpack-plugin` instead of the deprecated `eslint-loader` for Webpack 5 compatibility.

### Why does ESLint report errors on my webpack.config.js file?

The Airbnb config treats [`webpack.config.js`](https://github.com/airbnb/javascript/blob/main/webpack.config.js) as a development configuration file, allowing it to import packages listed in devDependencies. However, if you named your config file differently, you may need to add it to the `import/no-extraneous-dependencies` rule's `devDependencies` pattern or move those dependencies to `dependencies` in your package.json.

### Can I use eslint-config-airbnb without React?

Yes. If you are using Webpack for a non-React project, extend `eslint-config-airbnb-base` instead of `eslint-config-airbnb`. The base configuration includes all the Webpack-specific import rules without the React, JSX, or Hooks plugins, making it suitable for vanilla JavaScript or Node.js applications bundled with Webpack.

### How do I disable the rule against inline Webpack loaders?

To allow inline loader syntax (e.g., `!!loader!path`), set `"import/no-webpack-loader-syntax": "off"` in your ESLint configuration's rules section. According to the source code in [`packages/eslint-config-airbnb-base/rules/imports.js`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb-base/rules/imports.js) (lines 88-91), this rule is enabled by default to discourage bundler-specific syntax in application code.