Сделайте так, чтобы модули, импортированные из webpack (raw-loader), работали с quokka. Не удается найти ошибку модуля
Я хотел бы использовать quokka в проекте, где я использую raw-loader для загрузки обычного текста из других скриптов в машинописный текст. Моя проблема в том, что я не могу заставить quokka загружать модули, в которых raw-loader делает, как указано в конфигурации веб-пакета.
В моем файле webpack.config, среди прочего, есть:
const srcPath = path.resolve(__dirname, 'src');
module.exports = {
resolve: {
alias: {
'@': srcPath,
},
extensions: ['.tsx', '.ts', '.js', '.js', '.json'],
},
{
test: /\.(vert|frag)$/,
loader: 'raw-loader',
include: srcPath,
exclude: modulesPath,
},
}
Чтобы иметь возможность использовать определенный импорт в моем проекте, например:
import vertexShaderSource from '@/shaders/main.vert';
Thant отлично работает. Но когда я пытаюсь включить quokka в свой проект и пытаюсь использовать псевдоним @ в config.json quokka:
{
"pro":true,
"plugins":[
"alias-quokka-plugin",
"jsdom-quokka-plugin"
],
"alias": {
"@/": "./src/"
}
}
Я получаю сообщение об ошибке: не могу найти модуль '@/shaders/main.vert'. Я старался:
1.- Все комбинации путей в псевдониме, чтобы избежать ошибок типа, а также пытался жестко закодировать путь непосредственно в config.json, но кажется, что raw-loader должен вступить в игру, и он не знает, как сделать логику из webpack.config работает в config.json quokka.
2.- Жесткое кодирование пути в импорте напрямую:
import vertexShaderSource from 'fullPathHere';
Но eslint не распознает это как модуль, согласно настройкам импорта eslint в.eslintrc.js:
settings: {
'import/resolver': {
alias: {
map: [
['@', path.resolve(__dirname, 'src')],
],
},
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
},
},
'import/parsers': {
'@typescript-eslint/parser': ['.ts', '.tsx'],
},
},
Подводя итог, вопрос в том, как заставить модули, импортированные из raw-loader, работать с quokka.
Изменить: в документации объясняется, как сделать импорт квокка в соответствии с конфигурацией веб-пакета, поэтому я добавил appconfig в свой файл конфигурации веб-пакета:
// in webpack.config.dev
resolve: {
alias: {
appconfig: 'path/to/appconfig/dev'
}
}
Более конкретно, в моем webpack.config.js:
resolve: {
alias: {
'@': srcPath,
},
extensions: ['.tsx', '.ts', '.js', '.js', '.json'],
appconfig: 'fullHardcodedPathToMywebpack.config.jsFile',
},
Как указано в документации, но я продолжаю получать ошибку "модуль не найден".