title: Configure Webpack to resolve relative paths
body: <p>I am trying to implement <strong>Material Web Components</strong> into my Web App as per Material Component Web's <a href="https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md" rel="nofollow noreferrer">Getting Started Guide</a>.</p>
  
  <p>I was able to successfully set up Webpack (V3) to load the SASS for a web component. This was after running into a problem with the include path. I was able to resolve this by adding this line to my <code>webpack.config.js</code>.</p>
  
  <pre><code>{
      loader: 'sass-loader',
      options: {
          includePaths: ['./node_modules']
      }
  }
  </code></pre>
  
  <p>However, I wasn't as successful compiling the JS.</p>
  
  <p>The component in question is Material Web's <a href="https://material.io/develop/web/components/top-app-bar/" rel="nofollow noreferrer">Top App Bar</a>.</p>
  
  <p>In my main js file, I have the following:</p>
  
  <pre><code>import {MDCTopAppBar} from './../../node_modules/@material/top-app-bar/index.js';
  const topAppBarElement = document.querySelector('.mdc-top-app-bar');
  const topAppBar = new MDCTopAppBar(topAppBarElement);
  </code></pre>
  
  <p>I had originally put it as:</p>
  
  <pre><code>import {MDCTopAppBar} from './node_modules/@material/top-app-bar/index';
  </code></pre>
  
  <p>But Webpack complained that the file could not be found: </p>
  
  <blockquote>
    <p>Module not found: Error: Can't resolve './node_modules/@material/top-app-bar/index'.</p>
  </blockquote>
  
  <p>I tried adding this code to my <code>webpack.config.js</code>, based on Webpack's <a href="https://webpack.js.org/configuration/resolve/#resolve-alias" rel="nofollow noreferrer">Module.alias</a> documentation, to get around that error but to no avail (likely my error in implementation):</p>
  
  <pre><code>resolve: {
      alias: {
          MDCTopAppBar: path.resolve(__dirname, 'node_modules/@material/')
      }
  }
  </code></pre>
  
  <p>Alas, the code compiles but in Chrome's DevTools I get the following error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Failed to resolve module specifier "@material/base/component". Relative references must start with either "/", "./", or "../".</p>
  </blockquote>
  
  <p>This error comes from <em>Top App Bar's</em> <code>index.js</code> file which imports a bunch of other components:</p>
  
  <pre><code>import MDCTopAppBarAdapter from './adapter';
  import MDCComponent from '@material/base/component';
  import {MDCRipple} from '@material/ripple/index';
  import {cssClasses, strings} from './constants';
  import MDCTopAppBarBaseFoundation from './foundation';
  import MDCFixedTopAppBarFoundation from './fixed/foundation';
  import MDCShortTopAppBarFoundation from './short/foundation';
  import MDCTopAppBarFoundation from './standard/foundation';
  </code></pre>
  
  <p>Here is a picture of what the file structure looks like for the <code>Top App Bar</code> component:</p>
  
  <pre><code>/node_modules
    /@material
      /base
      /ripple
      /top-app-bar
        -adapter.js
        -constants
        -index.js
  /src
    -main.js
  </code></pre>
  
  <p>In <code>top-app-bar/index.js</code>, I could manually go through this file (and any subsequent modules I want to include) and rewrite all the paths as relative but that's a terrible approach.</p>
  
  <p><em>How can I configure Webpack to resolve these relative paths automatically?</em></p>
  
  <p>I tried using <a href="https://webpack.js.org/configuration/resolve/#resolve-modules" rel="nofollow noreferrer">resolve.modules</a> in various mutations like this but with no success:</p>
  
  <pre><code>resolve: {
       modules: [
          path.resolve(__dirname, 'node_modules/@material'),
          path.resolve(__dirname, 'node_modules/@material/base/'),
          path.resolve(__dirname, 'node_modules/@material/base/component'),
          path.resolve(__dirname, 'node_modules/@material/top-app-bar/'),
          'node_modules'
       ]
   }
  </code></pre>
  
  <p>Here are my project dependencies:</p>
  
  <pre><code>"dependencies": {
      "@material/top-app-bar": "^0.40.1"
    },
    "devDependencies": {
      "autoprefixer": "^9.2.0",
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.5",
      "babel-plugin-transform-object-assign": "^6.22.0",
      "babel-preset-es2015": "^6.24.1",
      "css-loader": "^1.0.0",
      "extract-loader": "^3.0.0",
      "file-loader": "^2.0.0",
      "grunt": "^1.0.3",
      "grunt-contrib-sass": "^1.0.0",
      "grunt-contrib-watch": "^1.1.0",
      "node-sass": "^4.9.4",
      "postcss-loader": "^3.0.0",
      "sass": "^1.14.2",
      "sass-loader": "^7.1.0",
      "webpack": "^3.12.0",
      "webpack-cli": "^3.1.2",
      "webpack-dev-server": "^2.11.3"
    }
  </code></pre>
  
  <p>I imagine I either have to figure out what I'm doing wrong with configuring webpack, configure a package like <code>babel-loader</code> to sort out the paths, or implement a custom solution similar to webpack's <a href="https://github.com/webpack/enhanced-resolve#creating-a-resolver" rel="nofollow noreferrer">enhanced-resolve</a> but only as a last resort.</p>
  
  <p>Thank you in advance!</p>