> For AI agents: the complete documentation index is available at https://rslint.rs/llms.txt, the full documentation bundle is available at https://rslint.rs/llms-full.txt.

# no-webpack-loader-syntax

[Added in v0.1.14](https://github.com/web-infra-dev/rslint/releases/tag/v0.1.14)
## Configuration


```ts title=rslint.config.ts
import { defineConfig, importPlugin } from '@rslint/core';

export default defineConfig([
  importPlugin.configs.recommended,
  {
    rules: {
      'import/no-webpack-loader-syntax': 'error',
    },
  },
]);
```

## Rule Details

Disallows the use of webpack loader syntax (`!`) in `import` statements and `require()` calls. Webpack allows specifying loaders inline using `!` in the module path (e.g., `css-loader!./styles.css`), but this couples the code to webpack and makes it non-portable to other bundlers or environments. Loader configuration should be specified in the webpack configuration file instead.

Examples of **incorrect** code for this rule:

```javascript
import styles from 'css-loader!./styles.css';

import content from 'html-loader!./template.html';

const styles = require('style-loader!css-loader!./styles.css');
```

Examples of **correct** code for this rule:

```javascript
import styles from './styles.css';

import content from './template.html';

const styles = require('./styles.css');
```

## Original Documentation

- [eslint-plugin-import: no-webpack-loader-syntax](https://github.com/import-js/eslint-plugin-import/blob/v2.32.0/docs/rules/no-webpack-loader-syntax.md)
- [Source code](https://github.com/import-js/eslint-plugin-import/blob/v2.32.0/src/rules/no-webpack-loader-syntax.js)