В проекте имеется директория frontend следующей структуры:
├── common
├── static
├── css
├── js
└── common.js
├── node_modules
├── package.json
├── app
├── static
├── css
├── js
└── script1.js
└── script2.js
└── webpack.config.js
Классы и некоторые методы, которые я определил в common.js, мне нужны в script1.js и script2.js. Я их импортировал как
import './common/static/js/common.js'
import { Class1, Class2 } from './common/static/js/common.js'
Но при сборке webpack --display-error-details сообщает об отсутвующем модуле
ERROR in ./app/static/app/js/settings.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./common/static/js/common.js in .../frontend/app/static/table/js resolve file
.../frontend/app/static/table/js/common/static/js/common.js doesn't exist
То есть webpack ищет файл в том же каталоге, где располгается вызывающий скрипт, а не каталог frontend
Я понимаю, что могу задать инструкцию импорта вида ../../../../../../script.js, но это выглядит не очень.
Можно сделать так, чтобы webpack искал относительно заданного мной каталога, в данном случае frontend?
Сейчас часть конфига с resolve выглядит так:
resolve: {
moduleDirectories: ['node_modules'],
extension: ['', '.js', '.styl']
},
Дополнение. Импорт прошел успешно только после того, как добавил в конфиг директорию с импортируемым скриптом:
resolve: {
root: [
path.resolve('./common/static/js'),
],
moduleDirectories: ['node_modules'],
extension: ['', '.js', '.styl']
},
Почему добавляется в качестве корня этот каталог и не добавляется каталог, в котором лежит конфиг?
Ошибка исправлена - неправильно записывал импорты. Настройки вебпака из ответа Утки
resolve: {
root: [
path.resolve(__dirname),
],
moduleDirectories: ['node_modules'],
extension: ['', '.js', '.styl']
},
Поправил импорт
import { capitalizeFirstLetter, formatString } from 'common/static/js/common.js';
import { elementByClass, elementById } from 'common/static/js/common.js'
Ответ
Для webpack 1 (то есть текущего стабильного документированного) нужно добавить root в секцию resolve
var path = require('path');
resolve: {
root: [
path.resolve('yourRoot')
]
},
yourRoot - расположение желаемого корня. Например текущую директорию для webpack.config.js можно взять так: path.resolve(__dirname)
path - родной нодовский модуль, ставить отдельно не надо.
Комментариев нет:
Отправить комментарий