Webpack 6.1 Стили и файлы - Компонент 'меню', style-loader

[oivchenko]

Просто и доступно изложены основы и нюансы работы с WebPack Этот курс мне очень помог Спасибо Илья !

[UtilitarHouse]

Фух...заработало!!! Пару дней пилил))) Илья, спасибо!!! Есть один(вернее несколько) прошу прощения за флуд, просто помощь тем, кто как и я не знает jade и stylus на уровне, приемлемом для данного выпуска...
П. 1) Для данного упражнения необходимо установить помимо всех Babel- и Webpack-овских библиотек, следующие:
1.1)style-loader
1.2)css-loader
1.3)stylus-loader
1.4)stylus
1.5)jade-loader
1.6)jade
1.7)file-loader
1.8)bootstrap(на всякий случай...)
все это делается в консоли командой npm install (<пункты 1.1 - 1.8 через пробел>) --save или --save-dev
2) Кто не знаком с синтаксисом jade и stylus, для того, чтобы данный пример отработал, необходимо четко соблюдать отступы(табуляцию)в файлах с этими расширениями, т.е. вложенные структуры всегда=предыдущие+отступ - поскольку я тупо скопировал код из gitHub у Ильи, чтобы проверить на работоспособность, вылезла куча ошибок, одной из которых была: ParseError: expected "indent" got "literal" .... хорошо, показало, где именно))) а то бы и дальше тупил...
3) в webpack.config.js:
3.1) лучше вначале сделать let path = require('path'); и затем прописывать path.join() - по крайней мере, на винде, чтобы не запутаться(см. комментарий Кирилла Гранева)
3.2) поддержка перевода кода в старый формат ES5(let преобразовывает в var и т.д.) на новом Babel-е: внутри соответствующего лоадера прописать:
после строчки loader:"babel",
query:{ presets:[ 'es2015' ] }
3.3) при выполнении в консоли часто писалось, что jade-лоадер устарел, мол, используйте вместо него pug-loader...установил его, прописал в конфиге соответствующую строку (loader:"pug") И опять понеслось))) ошибка вида: Pug each and for should no longer be prefixed with a dash("-") They are pug keywords and not part of JavaScript....лечится тем, что просто убрал лишнюю черточку в файле menu.jade... для данного пункта добавляем в список в п.1 еще 2 npm-пакета: pug и pug-loader(Примечание: многие подобные лоадеры идут в паре - помню, установил только pug-loader, постоянно была ошибка: "Cannot find loader: pug" - не понимал, почему, он же у меня по идее установлен))))
4) Соглашусь с Романом и Натальей Ковальскими, let Menu = require('./menu').default; при require.ensure()
У меня тоже только так заработало...
5) ОС: Win7x64
Заранее прошу прощения, если кто сочтет данное сообщение неуместным здесь...

[Vritmecomua]

обратите внимание, для использования лоадеров, их необходимо поставить через npm install

[mr_DorianGray]

После того, как обернули в require.ensure
стала падать ошибка: Uncaught TypeError: Menu is not a function
пришлось написать костыль в виде let Menu = require('./menu').default;
тогда заработало

как можно было сделать это более корректно ?

[КириллГранев-кы]

Если ошибки с loaders будут, то

let path = require('path');

module.exports = {
context: path.join(__dirname, '/frontend'),
....
}

[AtNovember]

не совсем понятно, а если я хочу использовать стили из какой-нибудь npm библиотеки - например bootstrap или bootstrap-material-design, которые лежат в node_modules, то каким образом мне сообщить лоадеру, "webpack, давай иди в node_modules и подключи мне стили из npm пакета" ?