Webpack. Базовая сборка проекта

[@dobramorda9818]

Очень полезное видео, автору спасибо! Ребят, вот список того, где будут ошибки относительно 2021.11.26 devServer - нужно вместо contentBase добавить поле объект static: { directory: project_dir} html-loader - нужно добавить еще опцию options: { esModule: false} Так же советую дополнить сборку таким вот образом const json = require('./package.json'); const project_name = json.name; const project_dir = path.resolve(__dirname, project_name); Берем название проекта из package.json, оно меняется при каждом npm init, чистим источники прошлого проекта, и стартовый набор ваших наработок уже подключен к новому проекту.

[@semenkliuchko3441]

Спасибо за твои подсказки, мне помогло решить вопрос с обработкой фото, никак не загружались.

[@ВикторОрлянский-я5ц]

Спасибо за совет! очень выручил!!!

[@alexbird1507]

У меня уже был готовый проект и с галпом все работало, а через вэбпак - пошли проблемы. Дополнил при html-loader в rules options: { esModule: false, sources: false, }, потому что шли ошибки с путями к картинкам.

[@555keira]

В документации webpack 5 сказано, что для очистки папки dist добавили свойство clean: true в output, поэтому можно избавиться от плагина clean-webpack-plugin )

[@maxgraph]

Ну отлично)

[@rozovays]

Спасибо

[@thefact4529]

пользуюсь, это круто

[@DmytroTorop]

Благодарю, возьму на вооружение)

[@StanislavKadyrov]

Спасибо за урок! Без воды, четко, понятно и по делу! Молодец!

[@maxgraph]

Спасибо))

[@daminator1994]

Спасибо за урок! Очень классн объясняешь. С третьей попытки нашел нормальное видео, где у меня все пошло как надо.

[@maxgraph]

Пожалуйста)

[@ВикторОрлянский-я5ц]

Максим, огромное тебе спасибо! Потратил уйму времени, чтобы разобраться, и только по твоему видео получилось запустить dev-server.

[@maxgraph]

Пожалуйста))

[@mikhaildv3689]

Спасибо за видео! Жду марафон по вёрстке с данной сборкой настроек Webpack 5. Ну и как в комментариях писали ранее, хотелось бы увидеть видео-урок по созданию многостраничных сайтов Webpack 5.

[@volhv12]

просто шикарная подача для новичков --- ставлю жирный наваристый лайк) спасибо за работу) даже на скорости 2

[@maxgraph]

Спасибо)

[@АлександрЧасовников-щ3ч]

Благодарю за урок! То, что нужно.

[@ПавелБашкеев-я3б]

Спасибо за данное видео!!!! Все подробно рассказано. Да и было бы отлично увидеть теперь верстку с этой сборкой.!!

[@hibiride]

Отличный видос! Все понятно.

[@miatomusic4158]

Неплохо бы рассмотреть такой момент, как возможность создания многостраничных сайтов Webpack 5

[@maxgraph]

Не учел это в видео, но если очень надо - сделаю отдельно.

[@miatomusic4158]

@@maxgraph надо очень. Или уже где-то выложено?

[@maxgraph]

@@miatomusic4158нет еще

[@romandogoda2003]

@@maxgraph Очень надо! Не обязательно писать видео, можно просто добавить к этой сборке в гит. И авто-префиксы тоже). Спасибо за твой труд - отличная подача.

[@gladiatorrussia]

@@romandogoda2003 присоединяюсь

[@mr__frankinshtein3347]

Добрый день. Спасибо огромное за видео!!! Спасибо за Ваш труд. Единственное видео, по которому смог собрать проект, только Вас теперь смотрю.

[@maxgraph]

Рад помочь)

[@ПавелЧипула-с5п]

Хорошая работа , сижу уже 5 часов возле видео , разбираю каждый момент , спасибо!!

[@maxgraph]

Пожалуйста)

[@АлександрМелянюк-ц9ю]

Сказал -> сделал!)Я как-то просил в комментариях webpack!)) Спасибо!!!!

[@maxgraph]

Пожалуйста :)

[@ДмитрийАлексеев-р9й]

Спасибо за разбор! Это моя первая сборка, собранная вручную, до этого верстал дедовскими методами) Все подробно и понятно, а самое главное - все работает) Жду еще видосов по webpack!

[@kvadratikk3861]

спасибо, самое актуальное видео по вебпак 5, наконец все стало понятно

[@maxgraph]

Пожалуйста)

[@dsogs9961]

Марафон с вебпаком!)

[@elenaizmaylova9331]

Максим, спасибо тебе огромное за видео! Ты просто супер!!!

[@maxgraph]

Пожалуйста)

[@ArtemBro-y5s]

Поддерживаю все положительные коменты ниже, реально класно сделан ролик, понятно, структурированно, а главное на сегодняшний день актуально по webpack 5. Хотел сделать сборку по другим видосам - не смог из-за слабых пока знаний( А тут все четко!!! Благодарен за проделаный труд и потраченное время! Мира и добра Вам!!!

[@CaMe_Tak]

Вау, это идеальное объяснение. Еще и с кодом. Большое спасибо!!! С меня подписка и лайк однозначно

[@maxgraph]

Пожалуйста)

[@hbg2055]

Просто красава! Очень хорошая подача материала. Спасибо!

[@marishakarpova8278]

Отличное видео 👍 Для закрепления надо бы пересмотреть пару раз. Хотелось бы марафон по верстке с данной сборкой, т.к. в основном в вакансиях требуется именно webpack. Спасибо за подробное видео.

[@maxgraph]

Вёрстку то на вебпаке не требуют) но я подумаю над этим, может летом сделаю

[@АртемСемёнов-к4ч]

Разбор как надо! Спасибо!

[@maxgraph]

Пожалуйста)

[@АндрейВикулов-ы8м]

Супер! Спасибо за полезное видео!

[@maxgraph]

Пожалуйста)

[@montenote]

Спасибо, всё круто. Прикол, я сам уже давно на Галпе и вот решил что-то поменять - так что конец видео мне особо понравился =D

[@maxgraph]

Пожалуйста)

[@ВадимБогданов-щ2ы]

Видео отличное, но есть местами дыры в тестах. К примеру если написать для проверки babel асинхронную функцию - то ничего работать не будет. Нужно изменить entry: './js/index.js' на entry: ['@babel/polyfill', './js/index.js'] и установка @babel/polyfill в Dependencies Для тех, кто хочет работать с нативным css (шлифованным postcss) нужны postcss postcss-easy-import postcss-loader autoprefixer csso в DevDependencies В plugins добавить new CssoWebpackPlugin(), и переписать лоадеры вот так { test: /\.css$/i, exclude: /node_modules/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: (resourcePath, context) => path.relative(path.dirname(resourcePath), context) + '/' } }, 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ EasyImport, Autoprefixer ] } } } ] } Ещё не досмотрел до самого конца, и впереди ещё кучу функционала которого нужно добавить будет самому. Но тебе большое спасибо за это видео) Пытался вкатиться в вебпак на курсе у Владилена, но там 4 версия и много чего не работает + заточено под проект курса, а мне нужно было собрать универсальный шаблон для вёрстки (решил переобуться с галпа и открыть для себя что-то новое). Сидел бы ждал обновления материала, если бы не ты)

[@dimeliora]

@babel/polyfill вроде уже deprecated, рекомендуют ставить core-js и настраивать пресеты babel под него, в этом случае и в entry кроме index.js ничего добавлять не нужно.

[@СергейКулаков-ю6д]

годный инструмент. ждём 2ю часть. ей обязательно быть место! Спасибо за труд-с! Разве только index.html? а как же много-много html'ов? :)

[@maxgraph]

Я сделал лишь базу :)

[@LuckyLucky-vq5lt]

Марафон с вебпаком!!!)

[@x-bit5193]

+ за марафон на этом конфиге!

[@technical777]

Спасибо за полезность ! Лайк и Подписка !

[@maxgraph]

Пожалуйста)

[@livechat1608]

Начну с того, что текст ниже - это не хейт, а указание на пункты, которые хорошо было бы исправить. Очень хорошо что автор снимает обучающие ролики, но всё же видео должны быть грамотными, чтобы не было недопонимания у зрителей. 1. Зачем в скриптах package.json одновременно и NODE_ENV и mode? Они делают одно и то же. 2. mode должен быть не статичным полем, а динамическим. 3. Не объяснена суть entry, что такое точки входа и как Webpack находит файлы для сборки. Это основа, которую каждый начинающий должен понять, чтобы не возникало ощущение магии. 4. С filename в output дико перемудрил. 5. Почитай что такое publicPath. 6. Модуль path используется для задания абсолютных путей там где Webpack их ожидает. С одной стороны, везде писать path не нужно, с другой стороны на это как бы пофиг, не ошибка. Но объяснить для чего нужен path надо. 7. В одной сборке используешь и html-loader и HtmlWebpackPlugin? Зачем? Они взаимозаменяемы. 8. css-loader преобразует код из CSS в JS, а не наоборот (как было сказано в видео). Здесь суть в том, что Webpack понимает ТОЛЬКО JS и JSON, поэтому css-loader и нужен, для преобразования CSS в JS. 9. MiniCssExtractPlugin замедляет скорость сборки. Он должен использоваться только в продакшене, а в режиме разработки используется style-loader, который внедряет CSS в JS, подключая стили к странице. 10. Зачем в видео разделение css и scss на два лоадера? Если к конфигу уже подключен sass-loader, то это действие лишнее, потому что sass-loader умеет работать как с .css, так и с .scss. 11. В babel-loader есть важная настройка targets. По-умолчанию при ее отсутствии babel конвертирует код до самых допотопных браузеров, увеличивая размер бандла в разы. Если в проекте не нужно поддерживать IE и очень старые версии современных браузеров, то нужно явно указать targets. 12. file-loader уже давно устарел, вместо него используется Asset Modules. Плюс там та же ситуация с непонятной генерацией имени, это все делается намного проще. 13. В HTMLWebpackPlugin по-умолчанию итак заданы то же значение для filename которое ты указал, это свойство здесь лишнее. Оно лишнее еще и потому, что файл с названием index.html итак должен существовать в проекте (в большинстве случаев). 14. В HTMLWebpackPlugin ты выставил свойство minify, сделав только удаление пробелов. Проблема в том, что minify делает гораздо большее, чем только удаляет пробелы, потому что там под капотом стоит Terser. А задавая в перечислении только удаление пробелов - ты отключил все остальные оптимизации плагина. 15. CleanWebpackPlugin тоже уже очень давно не требуется, его функционал включен в output в свойстве clean. 16. contenthash в имени это конечно хорошо, но хотелось бы услышать чем он отличается от hash и chunkhash. В целом хотелось бы слышать больше грамотных объяснений: что за что отвечает, почему это сделано именно так, и так далее.

[@IT_psychopath]

Если не работает, возьмите готовое с github, автор же дал ссылку в описании. Просто та что с его репа, она строго настроена под те зависимости, которые в ней использовались, и ошибок не должно быть вообще. А видео, просто как ознакомительное, можно себе в конфиге под видос комменты прописать, для более глубокого понимания.

[@andykud63]

Люблю практиков, а не водовозов!

[@podshib]

Есть кто использует Webpack 5 в разработке темы для Wordpress? Подскажите пожалуйста толковое видео или текстовый мануал. Это видео отличное - все работает. Автору респект.

[@maxgraph]

спасибо)

[@Ибрагим-вввв09]

Прекрасно )

[@555keira]

Вопрос: что если файлы с одним расширением (svg, например) встречаются в 3-х разных папках: img, fonts (иконочный шрифт) и в assets (favicon)? Как их разложить по нужным папкам в build?

[@СергейКулаков-ю6д]

Давайте попробуем сделать учебный проект. А там и на react перейдём )

[@Лехамахов-б5е]

все делал по видео, столкнулся с проблемой "html-loader", перекидывает картинки в папку app и подключает пути сам, плагин file-loader просто закидывает изображения в указанную папку но не подключает в html как этого избежать и сделать что бы картинки обрабатывал с подключением путей file-loader,?

[@gyros9162]

Спасибо за полезное видео! Было бы еще лучше показывать структуру проекта в самом VS Code

[@maxgraph]

Пожалуйста) учту

[@RuSSiAnBAtMAN]

Макс, отличное видео, спасибо! А теперь вопрос в студию: в 21 году у кого-нибудь получилось заставить заработать фоновую картинку?

[@jene3680]

test: /\.(jpe?g|png|gif|svg)$/i, type: 'asset/resource', generator: { filename: () => { return isDev ? 'img/[name][ext]' : 'img/[name].[contenthash][ext]'; } } }, как то -так

[@knowledge9396]

Хотелось бы поинтересоваться. Возможно, Вам известен какой либо способ организации HTML файлов, в сборке реализованной на Webpack, подобный тому, что применяется в Gulp сборке с помощью плагина gulp-file-include. Проще говоря, речь идет о разделении одного большого HTML фала, на несколько маленьких фрагментов, с целью последующего включения в какой либо другой, общий документ.

[@maxgraph]

Нет, не знаю такого. Возможно, его и нет)

[@deutschc9058]

попробую по вашему видеособрать ))надеюсь на этот раз будет удачно))

[@deutschc9058]

собралось , но все ImageMinimizerPlugin.loader, не стал...а так все супер...спасибо за труд...

[@gladiatorrussia]

Спасибо большое за сборку. Сделал себе все как у тебя. Можно узнать зачем нужны файлы .stylelintrc и .editorconfig? если их удалить ничего не случиться? и еще вопрос на счет автопрефиксера, он тут уже есть по умолчанию или нужно устанавливать?

[@maxgraph]

Не помню про автопрефиксер) надо проверить. насчет тех файлов - первый отвечает за настройка стайллинта (проверяет css-код), второй - за форматирование в редакторе. можно удалить в принципе

[@w_taurn]

Возник такой вопрос, настроил Webpack в проекте все хорошо.При создании нового проекта нужно заново все настраивать или есть более простой вариант?

[@maxgraph]

Копируешь все файлы, кроме нод модулей, и далее вызываешь npm i, все установится как в первый раз)

[@w_taurn]

@@maxgraph спасибо большое

[@АртемДумчиков-ж9ф]

Ошибка в DEV SERVER - вместо contentBase нужно static иначе сервак не запуститься

[@jenyaspace]

Сделал все тоже самое как на видео но publicPath не работает выдает ошибки

[@nalcapital]

Спасибо

[@maxgraph]

Пожалуйста)

[@JesseJames-mh5kb]

всем привет, такая ситуация: у index.html я вставил картинку(img src="img") и когда я запускаю webpack, то у в папке dist, в корне у меня появляется картинка у которой не название, а каракули, и если я запущу dev-server(npm run start), то браузер не отображает картинку, так как ссылается на путь той самой картинки с каракулями вместо названия, помогите плз решить проблему. File-loader подключен, картинки из src попадают куда надо, но браузер ссылается именно на это недоразумение в корне dist

[@_fulgrim_9865]

test: /\.(jpe?g|png|gif|svg)$/i, type: 'asset/resource', generator: { filename: () => { return isDev ? 'img/[name][ext]' : 'img/[name].[contenthash][ext]'; } } },

[@ВиталийИльин-я1п]

как решить то ?

[@ВиталийИльин-я1п]

{test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', generator: { filename: (isDev) =>{ if (isDev){ return 'static/img/[name][ext][query]'; } return 'static/img/[hash][ext][query]'; } }, },

[@JesseJames-mh5kb]

@@ВиталийИльин-я1п решил так, что установил готовую сборку вебпака. в чем была проблема так и не понял

[@ВиталийИльин-я1п]

@@JesseJames-mh5kb file loader устарел, его заменили на assets, в данном случае resource

[@ihorstrafun2551]

Привет!!! Hе подскажете как подключить favicon в webpack???

[@deniskotov]

У кого возникли проблемы с опцией contentBase для devServer, просто замените contentBase на static и автоматическая перезагрузка заработает.

[@ezoterikinfo]

Спасибо за видео! Подскажите, получилось ли как-то заставить работать svg-спрайты? "svg-sprite-loader" не добавляет в css пути к спрайту (issues/477), а "extract-svg-sprite-webpack-plugin", похоже, вообще не поддерживает webpack 5 т.к. выдает ошибку: "Error: Cannot find module 'webpack/lib/RuleSet'". Возможно, есть еще какие-то варианты?

[@vladislavsk5228]

Все ломается и перестает работаеть когда добавляю { test: /\.html$/, loader: 'html-loader', }, перелопатил уже все не найду причины

[@НикитаСоловьёв-й6к]

Аналогично, когда придёт помощь, дайте клич )

[@god2be]

Если еще актуально, то помогло { test: /\.html$/i, loader: 'html-loader', options: { esModule: false, } }, в webpack 5 esModule стоит по дефолту true, так что ломает все

[@miatomusic4158]

В документации webpack 5 написано, что terser-webpack-plugin и optimize-css-assets-webpack-plugin нет необходимости использовать

[@yuriikovalchuk564]

у меня в папке dist появляется 2 иконки favicon, одна хешированная (созданная с помощью html webpack plugin), а вторая скопированная copy-webpack-plugin. Есть идеи как это пофиксить? в патернах копи плагина создал globOption а в них ignore, и вставил имя иконки и расширение, но почему то не работает, плагин все равно копирует иконку

[@yuriikovalchuk564]

тоже самое происходит и с картинками

[@555keira]

У меня тоже такое было, для картинок и шрифтов использовала новую фичу asset, всё работает отлично (в generator указываем папку с нужным названием): { test: /\.(ico|gif|png|jpe?g|svg)$/i, type: 'asset/resource', generator: { filename: 'img/[name][ext]' } }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', generator: { filename: 'fonts/[name][ext]' } }

[@Ky3dMu4]

Здравствуйте, спасибо за сборку, отлично подали, правда я еще начинающий не все понял и поэтому ест один вопрос, когда собирается build и dev, дублируются файлы из папок img fonts и assets(был изменен при сборке было 'app' стало 'app/assets'), подскажите как это исправить.

[@vasyaplutau441]

возможно я и сам несу ерунду но 'app/assets' - означает то что внутри app есть одна папка assets если добавить в эту папку еще одну то app/assets будет просто app

[@LuckyLucky-vq5lt]

MAX подскажи как настроить, чтобы собирались несколько страниц .html . Две бессонные ночи) не могу разобраться. Если скопировать код еще раз в webpack.config.js: new HTMLWebpackPlugin({ template: path.resolve(__dirname, 'src/index.html'), filename: 'index.html', minify: { collapseWhitespace: isProd } }), new HTMLWebpackPlugin({ template: path.resolve(__dirname, 'src/test.html'), filename: 'test.html', minify: { collapseWhitespace: isProd } }), то он две страницы собирает, а если страниц будет больше, то проблемка))

[@LuckyLucky-vq5lt]

Разобрался))) const fs = require('fs'); const PATHS = { src: path.join(__dirname, './src') } const PAGES_DIR = `${PATHS.src}/pages/` const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug')) ...PAGES.map(page => new HtmlWebpackPlugin({ template: `${PAGES_DIR}/${page}`, filename: `./${page.replace(/\.pug/, '.html')}` })), может кому пригодится)

[@vladwolf444]

Импорт переменных из других scss не работает. В видео подобного не нашел, есть решение? Аналогичная ситуация с комментариями. При комментировании кода scss, webpack просто отказывается делать билд.

[@zubrdens]

hmr уже не работает.

[@frallen9787]

Для работы copy-webpack-plugin обязательно в папке должны быть файлы!

[@livechat1608]

Нет, просто автор не показал как обработать случай отсутствия файлов. Есть специальное свойство в настройках плагина

[@alexandrtimofeev4511]

наткнулся на такую ошибку, в чем может быть проблема??? З.Ы. остановился на 43 минуте видео ERROR in ./css/style.css Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js): ValidationError: Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'hmr'. These properties are valid: object { publicPath?, esModule?, modules? } at validate (C:\Users\lenovo_v580c\Desktop\webpack_lessons2 ode_modules\schema-utils\dist\validate.js:104:11) at Object.pitch (C:\Users\lenovo_v580c\Desktop\webpack_lessons2 ode_modules\mini-css-extract-plugin\dist\loader.js:39:29)

[@alexandrtimofeev4511]

сам код const path = require('path') , HTMLWebpackPlugin = require('html-webpack-plugin') , {CleanWebpackPlugin} = require('clean-webpack-plugin') , MiniCssExtractPlugin = require('mini-css-extract-plugin'); const isDev = process.env.NODE_ENV === 'development' , isProd = !isDev , filename = (ext) => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`; module.exports = { context: path.resolve(__dirname, 'src') , mode: 'development' , entry: '/js/main.js' , output: { path: path.resolve(__dirname, 'app') , filename: `./js/${filename('js')}` } , devServer: { historyApiFallback: true, contentBase: path.resolve(__dirname, 'app'), open: true, compress: true, hot: true, port: 3000, } , plugins: [ new HTMLWebpackPlugin({ template: path.resolve(__dirname, 'src/index.html') , filename: 'index.html' , minify: { collapseWhitespace: isProd } }) , new CleanWebpackPlugin() , new MiniCssExtractPlugin({ filename: `./css/${filename('css')}` }) ] , module: { rules: [ { test: /\.css$/i, use: [ { loader: MiniCssExtractPlugin.loader, options: { hmr: isDev }, }, 'css-loader' ], } , { test: /\.s[ac]ss$/i, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] } ] } };1

[@artwin777]

file loader не работает на этой конфигурации!!! Будьте внимательны

[@artwin777]

html loader также не работает как надо, если img запихнуть напрямую в html то картинки работать не будут, через css все норм.

[@anatoliitupkalo1416]

Спасибо за урок. У меня возникла проблема с sass, консоль говорит, что нету подходящего лоудера, хотя все стоит, и все подключено, и это уже не первый раз возникает сложность в работе webpack and sass. Что может быть и где поискать ответ?

[@maxgraph]

Смотреть надо, так увы не знаю

[@МагаМагамед-р3л]

не работает webpack когда я установили это плагин html-webpack-plugin и вот такая ошибка [webpack-cli] Failed to load 'C:\Users\Magomedov\Documents\webpack\webpack-2\webpack.config.js' config [webpack-cli] Error: Cannot find module 'loader-utils' Require stack: ? несколько раз пробовала бесполезный

[@anchoysSmurf]

а как обрабатывать несколько файлов scss, js, html

[@maxgraph]

постараюсь в мае-июне запилить ролик на тему)

[@servera-center]

как добавить плагин inputmask? импортировать те

[@maxgraph]

Через npm

[@servera-center]

@@maxgraph не в этом плане через es6

[@vladislavromanov3384]

Извиняюсь за глупый вопрос заранее! Вот представим, что я начинаю новый проект. Создал папку, в нее закинул все конфиги, сделал такую же структуру. Чтобы с этим работать, мне что-либо надо заново прописывать в консоле, что-то подгружать и так далее?) Или же скопировал и все уже будет работать?

[@maxgraph]

скопировать и ввести команду для старта)

[@vladislavromanov3384]

@@maxgraph круто! Спасибо)

[@dimeliora]

Ну, node_modules надо установить, это делается командой npm i, из package.json будут взяты все зависимости для установки. После этого запускать скрипты и работать.

[@dexterdragons]

how to file include webpack plugin by concatenation?

[@ktytar]

У меня не работали импорты в scss, только если из node_modules импортировать все работало. Установил в зависимости "sass" теперь все ок. Максим, почему у тебя все сразу собралось ?

[@maxgraph]

Возможно потому что сам сасс обновился не так давно, а видео уже давнишнее.

[@zubrdens]

В devServer вместо contentBas нужно static

[@АрсенийПаршуков-к4я]

Спасибо огромное!

[@vladislavsk5228]

Добрый день. Спасибо большое за сборку, но есть момент, она не работает под IE, подскажите пожалуйста как исправить что бы и в IE работало.

[@maxgraph]

Добрый вечер. Не работаю с IE, не знаю)

[@denysdvornykov1058]

В описании terser-webpack-plugin сказано что в вебпак 5 он уже идет в упаковке и не нуждается в отдельной установке ( you are using webpack v5 or above you do not need to install this plugin), Вы вроде уже 5 версию используете, или я что-то не понял?

[@maxgraph]

может я не увидел, или в тот момент у них этого не было. но люди на гитхабе писали мол не подходит для вебпака версии 5.

[@kazikhangereykhanov9951]

Cпасибо большое а то везде ролики про webpack4 и инфа и примеры уже не актуальны.

[@maxgraph]

пожалуйста)

[@IT_psychopath]

у ого на linux и macos не ставиться дополнительное к плагину imagemin-webpack то вот решение: Linux: sudo apt-get install libtool automake autoconf nasm OS X: brew install libtool automake autoconf nasm

[@Uncaught_in_promise]

Кстати, уже Webpack обновился до след. версии. Есть смысл смотреть это видео и повторять?

[@maxgraph]

не проверял)

[@zubrdens]

картинка из стилей импортируется в корень app в нечитаемом формате, ничего не помогает.

[@xiii4526]

Если у кого-то сервак не работает, то ставьте версию "webpack-cli": "^3.3.12". Запуск такой - "start": "cross-env NODE_ENV=development webpack-dev-server --mode development --open"

[@monoteiz]

Плагины оптимизации для текущей версии WebPack устарели и нестабильно работают, к примеру, у меня не робят, даже image-minimizer-webpack-plugin, на который ссылает imagemin-webpack работает с версией 4. Ждем их обновления

[@h3ckphy246]

А когда нужно использовать webpack? Я хочу сверстать например небольшой интернет-магазин. Как понять, что мне нужен webpack, а не gulp?

[@maxgraph]

Для веб приложений вебпак, для вёрстки галп

[@h3ckphy246]

@@maxgraph а что такое "веб приложение"? Типо фигмы в браузере?)

[@h3ckphy246]

@@maxgraph ????

[@maxgraph]

Да, как вариант. Или гугл диск например)

[@dobrMAV]

Подскажите пожалуйста,Webpack устанавливается глобально?Много места на компе занимает?Комп слабенький.

[@maxgraph]

Можно и локально, если глобально не хочется) не много

[@dobrMAV]

@@maxgraph Спасибо за ответ!Наверное лучше глобально установить.Больше переживаю чтобы слабый комп.потянул.Node.js установил теперь хочу попробовать установить Webpack и сделать свою первую сборку в жизни.

[@maxgraph]

Все получится)

[@dobrMAV]

@@maxgraph Спасибо!

[@im-a-mace]

Спасибо за видео, очень полезно! Одназначно на этой сборке я бы посмотрел вёрстку! А на счет webpack'a возникли некоторые вопросы: 1. Все эти ритуалы делаются 1 раз, а после можно вебпак сборку использовать повторно? 2. Нужно ли шарить в js для сборки? 3. Можно ли собрать вебпак вслепую, то есть просто повторить что на видео? Ибо последовательность действий в видео мне не очень интуитивно понятно, вероятно из-за того что в js не очень понимаю

[@maxgraph]

1. да 2. для сборки в вебпак - да 3. по идее да, но лучше разбираться)

[@martel5532]

43:45 автор сам не понимает что делает, но в этом и вся суть вебпака, какое-то нагромождение команд и конфигураций. В самом начале он говорит что у нас будет одна проблемка, но о ней чуть позже... проблемок будет много и постоянно, поверьте) Импортировать в js файл html и сыы, чтобы он потом автоматически подключался в html файле. Хитро

[@maxgraph]

Кажется, вам нужно пересмотреть видео внимательнее)

[@moovlaze9071]

А разве можно сделать как-то подругому?

[@valerypobelenskiy1001]

Максим привет, слушай возникает ошибка при запуске Хоста 3000 пишит (node:348) UnhandledPromiseRejectionWarning: ValidationError: webpack Dev Server Invalid Options options should NOT have additional properties я грешу на свою винду старую 7 ка и Service-Pack 1 у меня стоит

[@maxgraph]

Привет, судя по ошибке - заданы какие-то неверные опции для сервера. Ничего лишнего не делали?)

[@AndreyEricksonGame]

Почему-то у меня папка с картинками после билда, появляется при условии импорта этой картинки в файл main.js. А как можно обойтись без импорта картинки в main.js? Аналогичная ситуация со шрифтами. Шрифты подключены, но при билде папка с шрифтами не создается

[@maxgraph]

я по-моему это показывал как раз в видео)

[@AndreyEricksonGame]

теперь работает. Только немного странно. У меня в rules, где я обрабатываю фотки, указан name: `./img/${filename('[ext]')}`. То есть после билда у меня должна появится папка img с картинками в 'app', но почему-то если я изменю название папки в папке 'src' вручную, например, на images, то после билда будет папка images, а не img. Почему так?

[@maxgraph]

тут уж надо код смотреть.

[@КоврижкоНиколай]

@@maxgraph не создается папки fonts, даже при подключении

[@maxgraph]

Она не должна создаваться. Посмотрите сборку, она там есть

[@lithium5325]

Не сегоднешний день сборка не работает, многие пакеты устарели

[@maxgraph]

Это нормально)

[@vitalb7907]

Опа, ты на вебпак перешел?)

[@maxgraph]

нет)

[@sofyap.2153]

Два раза пересобрала по Вашему видео, но все равно ошибка в загрузке картинки((

[@maxgraph]

Скорее всего какие-то пакеты просто обновились и работают иначе

[@zimtos2616]

При установки webpack-dev-сервер появилась ошибка. Может кто знает как починить? помогите пж npm ERR! code ERESOLVE npm ERR! Cannot read property 'length' of undefined

[@maxgraph]

код надо видеть)

[@zimtos2616]

@@maxgraph package.json { "name": "chenlion", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "ilya", "license": "ISC", "devDependencies": { "webpack": "^5.8.0", "webpack-cli": "^4.2.0" } } Терминал. Когда прописываю команду для подключения webpack-dev-server PS B:\ilya\chen> npm i webpack-dev-server --save-dev npm ERR! code ERESOLVE npm ERR! Cannot read property 'length' of undefined npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Ilya\AppData\Local pm-cache\_logs\2020-11-29T14_41_30_072Z-debug.log

[@lion-gg]

@@zimtos2616 npm крашит... из github issues нашел что то похожее в его старых версиях. Пропробуй ноду (npm c нодой идет) переустановить/обновить на последнюю LTS с офф сайта nodejs.org. Какая версия npm ? (npm -v)

[@dsogs9961]

@@zimtos2616 мда

[@carry-on-chaos4032]

Всем привет, может кто-то подскажет, как настроить webpack, так что бы я смог свой html разбивать на модули, например, так же как работает gulp-file-include

[@monoteiz]

16:50 хеш нужен только на dev, спутали условие

[@xD-hu3gw]

когда там можно уже пихать в сборку свгспрайт?

[@maxgraph]

может уже и можно, не проверял)

[@xD-hu3gw]

@@maxgraph сможете сделать видос много страничник + паг + свг ?=)

[@maxgraph]

Дадите макет - сделаю))

[@xD-hu3gw]

@@maxgraph та нее) я про веб сборку

[@maxgraph]

А, ну может)

[@IT_psychopath]

авто префексов в css не хватает... или он с коробки это умеет? а так, спасибо, то что надо.)))

[@alexeipopov3319]

Когда марафон?

[@anton-trofimov]

Подскажите плиз, кто может, как в эту сборку добавить autoprefixer? И slick-carousel стили не удается подключить, выдает ошибку

[@codememory]

А тебе по кайфу чистить кэш постоянно в режиме dev? Если нет, то и хэш нужно для файла давать не только в режиме прода

[@maxgraph]

Именно поэтому все стоит на продакшн :)

[@nikitaspasatelev7049]

Автоматическая перезагрузка не работает, прелоадер на sass

[@adamholo7079]

Такая же ситуация. Пишёт мол не понимает что написано в main.scss. Сижу уже 3 часа не понимаю почему он не может прочитать scss

[@nikitaspasatelev7049]

@@adamholo7079 У меня понимает что пишется в scss, только обновлять - только вручную работает. Это значит с прелоадером где-то у меня косяк. Долго просидел, даже уже в режим списывания перешел))) Не могу понять, где в настройках поменять

[@ВадимБогданов-щ2ы]

Добавь в module.exports target: isDev ? 'web' : 'browserslist'

[@AloneInThisWorld.]

Не знаю, актуально или нет. Но вот ссылка с документации webpack.js.org/plugins/mini-css-extract-plugin/#common-use-case . Показан правильный вариант использования css, scss лоадеров. У меня заработало.

[@City__Walker]

Может тогда проще сразу create-react-app если конечно разбирается человек

[@justaman834]

Что там по спрайтам?)

[@maxgraph]

надо будет проверить, что они там сделали) выпущу может дополнение

[@lk6618]

А зачем вообще нужен сборщик файлов? Какие функции он выполняет? Где об этом детально?

[@maxgraph]

Это практическое руководство по вебпаку, а не теория сборщиков

[@iGotton]

+

[@AndreyEricksonGame]

Помогите плиз решить данную проблему