Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
April 14, 2016

ES6 Import Statement Without Relative Paths Using Webpack

DevOps, JavaScript

The ES2015 module system is probably familiar to you by now. If you’ve used it, you might have faced the familiar relative path inclusion problem.

Using relative paths for imports makes your code base very hard to maintain, not to mention the hassle required to figure out where the inclusion is relative to the current path. If your code resembles the example below, today might be your lucky day!

import Header from '../../components/Header';
import Grid from '../../components/Grid';
import TransactionForm from '../TransactionForm';
import TransactionSummary from '../TransactionSummary';
import * as AppActions from '../../actions';

Import Path Resolver

With a very minor tweak to our Webpack configuration, we can get it to load files relative to the app root. Actually, we can configure the resolver to load from multiple root folders and our import declaration will get a major overhaul.

import Header from 'components/Header';
import Grid from 'components/Grid';
import TransactionForm from 'containers/TransactionForm';
import TransactionSummary from 'containers/TransactionSummary';
import * as AppActions from 'actions';

That looks much better, doesn’t it?

Webpack 1.x Path Resolver Configuration

Here’s the trick that makes the above possible:

resolve: {
  root: [
    path.resolve('./client')
  ]
},

Use this in your Webpack v1.x configuration. You might already have a ‘resolve’ setting in there. Keep everything there, but add a root key and specify all the folders that you would like to load your files from. In my case it’s the ./client/ folder.

Adding too many folders may not turn out to be a good idea so don’t go wild with it either. Recursive search in too many paths may result in slower webpack builds, and it makes it harder to keep track of where the imports are coming from.

Webpack 2.x Path Resolver Configuration

In Webpack 2, resolvers from root (as used above), modulesDirectories, and fallback settings will merge into a single property – modules. Here is how we can do the same trick in Webpack 2:

resolve: {
  modules: [
    path.resolve('./client'),
    path.resolve('./node_modules')
  ]
},

You can specify a number of directories in modules, but make sure not to forget node_modules or npm package dependencies will fail to load.

Sample Project With Webpack Configuration

You can see the above setup in a sample project that uses Webpack + Redux + React. Feel free to use it in your own projects.

Please share this if you think your network might find this information helpful. Let me know how this worked for you in the comments below or on Twitter.

Posted in DevOps, JavaScript
Share this

Grgur Grisogono

Grgur Grisogono is a software architect at Modus Create, specializing in JavaScript performance, React JS, and Sencha frameworks. He helped clients ranging from Fortune 100 to major governments and startups successfully release enterprise and consumer-facing web applications. He has also organized three tech conferences and co-authored Ext JS in Action SE. If Grgur's posts were helpful, maybe his 16 years of experience could help your project too.
Follow

Related Posts

  • Optimizing-React-ES6-Webpack-Production-Build
    Optimizing React + ES6 + Webpack Production Build

    Writing a web application in React using the ES6 awesomeness and spiced up with Webpack…

  • Webpack Tree Shaking
    Webpack 2 Tree Shaking Configuration

    Tree Shaking, a modern dead code elimination algorithm for ECMAScript 2015+ is one of the…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top