Почему псевдонимы неправильно решены с моей конфигурацией?

Question

У меня есть следующий resolve вариант в моем WebPack конфигурации:

resolve: { 
    modules: ["./app/static/js/homepage/", "./app/static/js/dashboard/",], 
    extensions: [".js", ], 
    alias: { 
     "bootstrap": "../../bower_components/bootstrap/dist/js/bootstrap", 
     "lodash": "../../bower_components/lodash/lodash", 
    // ... 

Но я получаю эту ошибку:

ERROR in ./app/static/js/dashboard/main.js 
Module not found: Error: Can't resolve 'underscore' in '/app/app/static/js/dashboard' 
@ ./app/static/js/dashboard/main.js 84:0-112:2 

Что означает, что он не относится к underscore в качестве псевдонима, который случается со всеми define в моем проекте.

Answer 1

Вы альясинг их относительный путь и вы поднимаетесь две директории (с ../../), поэтому при импорте lodash в ./app/static/js/dashboard/main.js, он будет пытаться найти модуль в

./app/static/bower_components/lodash/lodash 

Предполагая, что ваш bower_components находятся в верхнем уровне проекта (как рекомендуется), вы можете исправить псевдонимы, перейдя четыре каталога:

alias: { 
    "bootstrap": "../../../../bower_components/bootstrap/dist/js/bootstrap", 
    "lodash": "../../../../bower_components/lodash/lodash", 
} 

Примечание, это будет работать только если вы импортировать их в файл, который четыре уровня глубоко. Замена их абсолютными путями будет работать повсюду.

Еще одно решение - добавить bower_components к вашим модулям, поэтому он выглядит в каталоге bower_component, что является распространенным способом интегрирования беседки в веб-пакет. С этим вы можете просто использовать import _ from 'lodash/lodash' без добавления каких-либо псевдонимов. Но если вы все равно хотите иметь псевдоним, вы можете сделать это следующим образом:

resolve: { 
    modules: ["bower_components"], 
    extensions: [".js"], 
    alias: { 
    "bootstrap": "bootstrap/dist/js/bootstrap", 
    "lodash": "lodash/lodash", 
    } 
}