ESLint Import Resolver - Webpack is a module resolution plugin for eslint-plugin-import that integrates with webpack configurations. It enables ESLint to understand webpack's module resolution strategy including aliases, extensions, and custom resolve configurations, ensuring import/export rules work correctly with webpack-based projects.
npm install eslint-import-resolver-webpack --save-devconst resolver = require("eslint-import-resolver-webpack");
// Access the main resolver function
const { resolve } = resolver;
// Check interface version
const { interfaceVersion } = resolver;The resolver is typically configured in your ESLint configuration file rather than used directly in code:
# .eslintrc.yml
settings:
import/resolver: webpack # Use default webpack.config.jsOr with custom configuration:
# .eslintrc.yml
settings:
import/resolver:
webpack:
config: 'webpack.dev.config.js'
env:
NODE_ENV: 'development'The resolver operates by:
The main resolver interface that ESLint plugin import uses to resolve module paths. The resolver automatically strips webpack loaders and resource queries from the source parameter before processing.
The resolver preprocesses the source parameter as follows:
'style-loader!./file.css' becomes './file.css')'./file.js?query' becomes './file.js')This ensures that only the actual module path is resolved, without webpack-specific syntax.
/**
* Interface version for eslint-plugin-import compatibility
*/
exports.interfaceVersion = 2;
/**
* Resolve module paths using webpack configuration
* @param {string} source - The module to resolve (e.g., './some-module'). Webpack loaders (e.g., 'style-loader!./file.css') and resource queries (e.g., './file.js?query') are automatically stripped.
* @param {string} file - The importing file's full path
* @param {ResolverSettings} settings - Webpack configuration settings
* @returns {ResolverResult} Resolution result with found status and path
*/
exports.resolve = function(source, file, settings);Configuration options for customizing resolver behavior.
interface ResolverSettings {
/** Path to webpack config file or config object */
config?: string | WebpackConfig;
/** Current working directory to resolve webpack from (defaults to directory containing config path) */
cwd?: string;
/** Zero-based index for selecting specific config from array */
"config-index"?: number;
/** Environment variables to pass to webpack config function */
env?: Record<string, any>;
/** Arguments to pass to webpack config function (defaults to empty object) */
argv?: Record<string, any>;
/** Whether to cache function-based config evaluation (prevents re-evaluation on each resolve call) */
cache?: boolean;
}The result object returned by the resolve function.
interface ResolverResult {
/** Whether the module was successfully resolved */
found: boolean;
/** Resolved absolute path, or null for non-FS resources (e.g., externals, core modules) */
path: string | null;
}The resolver supports various webpack configuration formats and features:
resolve.aliasresolve.extensionspath: null)# .eslintrc.yml - Use default webpack.config.js
settings:
import/resolver: webpack# .eslintrc.yml
settings:
import/resolver:
webpack:
config: 'webpack.dev.config.js'# .eslintrc.yml
settings:
import/resolver:
webpack:
config: 'webpack.multiple.config.js'
config-index: 1 # Use second config# .eslintrc.yml
settings:
import/resolver:
webpack:
config: 'webpack.config.js'
env:
NODE_ENV: 'development'
DEBUG: true# .eslintrc.yml
settings:
import/resolver:
webpack:
config:
resolve:
extensions:
- .js
- .jsx
- .ts
- .tsx
alias:
'@': './src'
components: './src/components'# .eslintrc.yml
settings:
import/resolver:
webpack:
config: 'webpack.config.js'
cache: true # Cache function config evaluation
env:
NODE_ENV: 'production'
argv:
mode: 'production'The resolver handles various error conditions gracefully:
{ found: false } for unresolvable modules{ found: true, path: null } for external dependencies{ found: true, path: null } for Node.js core modules['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']{ unsafeCache: true, modules: ['node_modules'], extensions: ['.js', '.json'], aliasFields: ['browser'], mainFields: ['browser', 'module', 'main'] }