JSFE2021Q1 Webpack

Сборка из стрима - github.com/ai2...

[@1nightstarlight3]

if (wp !== wordpress && wp === webpack) console.log('Лайк Алексею за футболку SW!')
5:39 -- Начало, что такое wp
7:48 -- Создание проекта
9:11 -- Первичный package.json
10:29 -- Установка wp
11:42 -- wp.config.js
15:18 -- Скрипт запуска wp
16:52 -- Плагины
18:25 -- .editorconfig & .gitignore
18:50 -- babel
19:44 -- Добавление TS в проект
25:16 -- TS.config
32:48 -- Добавление HTML-плагина
42:02 -- Подключение assets (медиа-файлы)
48:50 -- asset/inline
50:20 -- Хэширование
59:16 -- Добавление плагина copy-wp-plugin
1:06:41 -- Добавление плагина clean-wp-plugin
1:08:54 -- Добавление стилей
1:23:00 -- Разные конфиги (две сборки)
1:30:22 -- devServer
1:39:19 -- eslint

[@xGL00M]

Картинка не подгрузилась, разбираться не будем идём дальше
а я как понять должен?

[@timashoff]

npm i -D html-loader
и в rules прописываем
{
test: /\.html$/i,
loader: 'html-loader'
}

[@ch_shik6042]

весь rs такой

[@meramod]

@@timashoff искренне благодарю!

[@chtotutunas432]

@@timashoff чет все равно не получается

[@alibek1545]

4:50 - Start

[@ibro7868]

спс

[@IgorBogdanov1]

в мае 2022 вместо
contentBase: path.join(__dirname, 'public'),
заработало:
static: {
directory: path.join(__dirname, 'public'),
},

[@misterpopcorn8789]

А для чего вообще нужна эта строчка? Вроде и без неё все работает..

[@MadinaR-bu8vl]

насчет того, что картинка не подтягивалась в html, нужно еще загрузить html-loader и добавить правило на него в конфиге

[@orionpro79]

А что с хот релоадом так и не объяснено тут в видео. Почему он не работал? Тут же новички, у них останутся только вопросы..)

[@antontyronchik496]

Вместо clean-webpack-plugin можно поставить флажек в поле output: {clean: true}

[@AnzhelikaMik]

Алексей! Хочу сказать Вам огромное спасибо за стрим, я много видео смотрела по вебпаку,дабы понять , что это за зверь, но ваше видео помогло мне больше всего!

[@abugsbunny]

Картинка в начале видео не копировалась потому что.....
If your images are only referenced in HTML files as tags, webpack by default won't pick them up because it doesn't parse HTML.
You have at least 2 choices:
Use CopyWebpackPlugin to copy the files to wherever you want, this at least removes the "manual" part you mention
Move your images references to styles, where webpack can pick them up via the scss loader you are using. For example
background-image: url("img/foo.png");

[@JavaScriptcher]

npm i -D css-loader sass-loader sass mini-css-extract-plugin 1:09:55

[@Keyra_Ren]

Один из самых полезных роликов на курсе!

[@JavaScriptcher]

Про установку webpack-dev-server 1:30÷20

[@ВероникаТен-ф3л]

Спасибо вам большое !! Вы крутой, такую сложную тему объясняете!!!

[@ТатьянаЛ-л9э]

Спасибо большое за видео!!!

[@JavaScriptcher]

clean-webpack-plugin 1:07:01

[@BarokPro]

Так а как сделать чтобы hot reload заработало?

[@ivan4486]

а почему некоторые программисты сидят в офисе в кепках - в чем прикол?

[@TONY_91]

Очень хорошие знания получил от вашего видео спасибо!!!

[@nanapisanko]

Спасибо! Все очень подробно и доходчиво) как раз то, что нужно новичкам)

[@vr4836]

Большое спасибо за ваш материал!

[@GEO-le5ft]

Спасибо тебе. Четко и по делу...впрочем как всегда.

[@vilgo3927]

1:39:25 eslint

[@alexroman8878]

Спасибо, очень полезно

[@ibro7868]

21:00 - typescript

[@zhanna8166]

Спасибо за стрим, многие стало на свои места в голове )

[@kirillkirillov8023]

не пашет

[@ИринаТоболич-х6н]

Большое спасибо!

[@ne_taka]

Очень полезная лекция! Огромное спасибо!)

[@СергейЛуняк-д5е]

после установки линта получил ошибку
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-test@ lint: `eslint src`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-test@ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Sergey\AppData\Roaming
pm-cache\_logs\2021-08-05T20_11_09_183Z-debug.log
PS C:\Users\Sergey\Desktop\webpack>