Настройте Webpack для разрешения относительных путей

Question

Я пытаюсь внедрить Веб-компоненты материалов в мое веб-приложение в соответствии с Руководством по началу работы с веб-компонентами материалов .

Мне удалось успешно настроить веб-пакет(V3), чтобы загрузить SASS для веб-компонента.Это было после столкновения с проблемой с включенным путем.Я смог решить эту проблему, добавив эту строку в мой webpack.config.js.

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

Однако компиляция JS оказалась не столь успешной.

Компонентом, о котором идет речь, является Material Web. Верхняя панель приложения .

В моем основном js-файле у меня есть следующее:

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

Первоначально я поставил его как:

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

Но Webpack пожаловался на то, что файл не найден:

Модуль не найден: Ошибка: не удается разрешить './node_modules/@material/top-app-bar/index'.

Я попытался добавить этот код в мою webpack.config.js, основываясь на документации Module.alias Webpack, чтобы обойти эту ошибку, но безрезультатно (вероятно, моя ошибка в реализации):

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

Увы, код компилируется, но в Chrome DevTools я получаю следующую ошибку:

Uncaught TypeError: Не удалось разрешить спецификатор модуля "@ material / base / component".Относительные ссылки должны начинаться с "/", "./" или "../".

Эта ошибка возникает из файла index.js верхней панели приложений, который импортируеткуча других компонентов:

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

Вот изображение того, как выглядит структура файла для компонента Top App Bar:

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

В top-app-bar/index.js, я мог бы вручнуюпросмотрите этот файл (и все последующие модули, которые я хочу включить) и перепишите все пути как относительные, но это ужасный подход.

Как я могу настроить Webpack для автоматического разрешения этих относительных путей?

Я пытался использовать resol.modules в различных мутациях, подобных этой, но безуспешно:

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

Вот мои зависимости проекта:

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

Полагаю, мне нужно либо выяснить, что я делаю неправильно при настройке веб-пакета, настроить пакет, например babel-loader, для сортировки путей, либо реализовать собственное решение, подобное расширенного разрешения * 1068 веб-пакета* но только в крайнем случае.

Заранее спасибо!