Configure Webpack to resolve relative paths

问题

I am trying to implement Material Web Components into my Web App as per Material Component Web's Getting Started Guide.

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 webpack.config.js.

{
    loader: 'sass-loader',
    options: {
        includePaths: ['./node_modules']
    }
}

However, I wasn't as successful compiling the JS.

The component in question is Material Web's Top App Bar.

In my main js file, I have the following:

import {MDCTopAppBar} from './../../node_modules/@material/top-app-bar/index.js';
const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

I had originally put it as:

import {MDCTopAppBar} from './node_modules/@material/top-app-bar/index';

But Webpack complained that the file could not be found:

Module not found: Error: Can't resolve './node_modules/@material/top-app-bar/index'.

I tried adding this code to my webpack.config.js, based on Webpack's Module.alias documentation, to get around that error but to no avail (likely my error in implementation):

resolve: {
    alias: {
        MDCTopAppBar: path.resolve(__dirname, 'node_modules/@material/')
    }
}

Alas, the code compiles but in Chrome's DevTools I get the following error:

Uncaught TypeError: Failed to resolve module specifier "@material/base/component". Relative references must start with either "/", "./", or "../".

This error comes from Top App Bar's index.js file which imports a bunch of other components:

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';

Here is a picture of what the file structure looks like for the Top App Bar component:

/node_modules
  /@material
    /base
    /ripple
    /top-app-bar
      -adapter.js
      -constants
      -index.js
/src
  -main.js

In top-app-bar/index.js, 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.

How can I configure Webpack to resolve these relative paths automatically?

I tried using resolve.modules in various mutations like this but with no success:

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'
     ]
 }

Here are my project dependencies:

"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"
  }

I imagine I either have to figure out what I'm doing wrong with configuring webpack, configure a package like babel-loader to sort out the paths, or implement a custom solution similar to webpack's enhanced-resolve but only as a last resort.

Thank you in advance!

来源：https://stackoverflow.com/questions/52862071/configure-webpack-to-resolve-relative-paths