Super simple imports with Webpack resolve

Modules were, without a dought, one of the best improvements that came with ES6. When combined with Webpack, it allows us to write code in a more developer-friendly way. But file referencing when importing can sometimes become repetitive, error-prone, …


This content originally appeared on DEV Community and was authored by Tjaša

Modules were, without a dought, one of the best improvements that came with ES6. When combined with Webpack, it allows us to write code in a more developer-friendly way. But file referencing when importing can sometimes become repetitive, error-prone, and hard to look at. Luckily Webpack has us covered with the right solution that is super easy to configure.

Webpack resolve

Resolve is a Webpack library that helps locate imported modules. To configure it, add the code snippet below to the config file.

webpack.config.js

module.exports = {
  resolve: {
    // configuration options
  },
};

Resolve library allows us to resolve imports in two ways: with modules or alias.

Modules

Modules resolve imports by searching for them in the specified directories. Often this is used to resolve node modules.

webpack.config.js

resolve: {
  modules: ['node_modules']
}

This configuration allows us to replace this:

import Module from '../../../../node_modules/module';

with this:

import Module from 'module';

Using resolve.modules, this is all you have to do to make imports work since it will not cause issues with other config files.

Alias

Alias resolves imports by replacing the original path with the custom one.

webpack.config.js

resolve: {
  alias: {
    @components: path.resolve(__dirname, 'components/'),
    @partials: path.resolve(__dirname, 'partials/'),
  },
}

This allows us to change this:

import Component from '../../../../components/component';
import Part from '../../../../partislas/part';

to this:

import Component from '@components/component';
import Part from '@partials/part';

Note that __dirname points to the location of the webpack.config.js file.

ESLint adjustment

Using an alias you might get an ESLint error saying the path can’t be resolved. To fix that you can use eslint-import-resolver-webpack.

To configure it you can add this line of code to the .eslintrc.yml file:

settings:
  import/resolver: webpack

This setting will work if a webpack.config.js is in the same directory as the eslintrc.yml file. Otherwise, see other settings options.

Summary

Configuring Webpack can be overwhelming with all the available options but luckily, this library is very simple to understand and configure. It helped me to write cleaner imports, and I am sure you will find it as useful as I have.


This content originally appeared on DEV Community and was authored by Tjaša


Print Share Comment Cite Upload Translate Updates
APA

Tjaša | Sciencx (2021-05-08T11:16:12+00:00) Super simple imports with Webpack resolve. Retrieved from https://www.scien.cx/2021/05/08/super-simple-imports-with-webpack-resolve/

MLA
" » Super simple imports with Webpack resolve." Tjaša | Sciencx - Saturday May 8, 2021, https://www.scien.cx/2021/05/08/super-simple-imports-with-webpack-resolve/
HARVARD
Tjaša | Sciencx Saturday May 8, 2021 » Super simple imports with Webpack resolve., viewed ,<https://www.scien.cx/2021/05/08/super-simple-imports-with-webpack-resolve/>
VANCOUVER
Tjaša | Sciencx - » Super simple imports with Webpack resolve. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/08/super-simple-imports-with-webpack-resolve/
CHICAGO
" » Super simple imports with Webpack resolve." Tjaša | Sciencx - Accessed . https://www.scien.cx/2021/05/08/super-simple-imports-with-webpack-resolve/
IEEE
" » Super simple imports with Webpack resolve." Tjaša | Sciencx [Online]. Available: https://www.scien.cx/2021/05/08/super-simple-imports-with-webpack-resolve/. [Accessed: ]
rf:citation
» Super simple imports with Webpack resolve | Tjaša | Sciencx | https://www.scien.cx/2021/05/08/super-simple-imports-with-webpack-resolve/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts