Webpack. Full Course 2020

@VladilenMinin привет, будет ли вэбпак 5 и если да, то когда?

Перезапиши урок по webpack5)

абсолютно нерабочие исходники с самого начала как можно на этом учить других

Спасибо за видео!
Подскажи пожалуйста какая директива в конфигурационном файле Webpack (при сборке) отвечает за доступность скриптов не из root (/) директории web-сервера?
Пример: отдали приложение, запускаю
localhost:8080/ - отрывается
Копирую все файлы в директорию /test
localhost:8080/test/ - файлы доступны (200), но приложение не открывается. При этом ошибок в браузерной консоли нет.

до сих пор лучшее видео про вебпак на ютубе

Эх, старый добрый Владилен))

всем порвет! возникла проблема.мне передали готовый проект и при запуске через npm выдает ошибку:
/Users/a431/Documents/бэкап на айклауд/програмирование/bizfinance/node_modules/.bin/encore: /usr/bin/env: bad interpreter: Operation not permitted

кто-то с таким сталкивался? работаю на маке через вс код. заранее спасибо)

Очень полезное видео ! спасибо большое !

Спасибо огромное за информацию! Есть вопрос, не излишне ли юзать ф-ию babelOptions? Она нам для каждого расширения файла(.ts, .js, .jsx), возвращает @babel/preset-env. Я к тому, что не проще ли подключить его чисто к .js, а остальные - соответствующие уже (.ts - peset-typesctipt и тд). Или это так не работает и нужно к каждому расширению добавлять preset-env?

Thnx!

Спасибо за урок!!!

Давай видео по использованию webpack в проектах с серверной частью приложения! Думаю это не только мне интересно будет, хотел у себя использовать webpack, но сразу же понял что не знаю как сделать, там ведь хеши файлов, как научить бэк отдавать нужное?

Вместо use ['file-loader'] для лоадеров пишите: type: 'asset/resource'
Например:
{
test: /\.(png|jpe?g|svg|gif)$/,
type: 'asset/resource'
},

У кого не работает devServer пишите так:
devServer: {
static: {
directory: './src',
},
port: 4200,
},

Для copy-webpack-plugin:
new CopyWebpackPlugin({
patterns: [
{from: './assets/favicon.ico', to: ''}
]
})

где from это путь к файлу, а to это куда надо перенести. Если нужна отдельная папка в папке dist то вписываем название, если нет оставляем кавычки пустыми


optimize-css-assets-webpack-plugin не заработал, для минификации css в production используйте данный код:

//установить
npm install css-minimizer-webpack-plugin --save-dev
//подключить
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

и вот кусочек кода для функции optimization.
if (!isDev) [
config.minimizer = [
new CssMinimizerPlugin(),
new TerserWebpackPlugin(),
]
]


Babel сейчас подключается так:
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
}
},

Еще в корневом каталоге проекта я создал файл babel.config.json и вписал в него
{
"presets": ["@babel/preset-env"]
}

Огромная благодарность за Ваш труд!

у меня не перезагружалась страница после изменения файлов, сделал такую настройку и заработало: devServer: {
port: "5000",
static: {
directory: path.resolve(__dirname, 'src')
},
watchFiles: path.resolve(__dirname, 'src'),
liveReload: true
},

Шикарный курс!

Какая версия ноды в проекте? Ловлю кучу ошибок при запуске исходника

Спасибо, товарищ. У вас такое замечательное имя. Желаю вам таких же масштабных свершений, как и у Владимира Ильича

Спасибо Большое!) Очень понятно Ты круто объясняешь, конечно есть поправки на текущую версию - но так даже было интересней изучать

Это один из лучших курсов. Автор делает большой охват материала, давая понять принципы работы Webpack. Материал очень качественный.

подскажите что за плагин для vs code с выбором браузера для локал хост?

Актуально еще видео ?

в webpack 5 с eslint-loader проблемы возникли. Просит переименовать .eslintrc в eslintrc.cjs, но и эт о не помогает. У кого похожая проблема?

лучше автора этого ролика будет только тот, кто скажет: ребята не надо ничего учить, вот вам деньги

Супер видео! Спасибо, Владилен.

Владилен здравствуйте. Я пару дней сижу над проблемой, которую не могу решить, может Вы мне подскажите :) как компилировать scss into css ONLY т.е entry : sass, output: ./.css . Спасибо заранее

Это было сильно)))
спасибо за твои видео

Не работал hmr при добавлении пакета MiniCssExtractPlugin, решил добавлением в optimization: { runtimeChunk: "single" }, может кому надо будет.

Простите за неуместный вопрос)) Но что это такое за спиной на дереве? Не могу понять и прям интересно стало)))

Просто лучший курс по вебпаку! 3 дня по 10 часов рыл все что можно, ничего не получалось, посмотрел твой курс в 3 часа и все получилось) спасибо тебе!

hmr В 5 версии не настраивается

Отличный материал. Большое спасибо автору за классную работу.

Если собрать приложение. Получается его можно будет публиковать как js - на любом хостинге и домене (не зависимо поддерживает он react или нет) ?

Огромное спасибо за урок!!! Не без страданий и гуглёжа, но я его осилил и многое понял!

Пометки из 2023:
1) если у вас стоит расширение jshint - удаляйте его НЕЗАМЕДЛИТЕЛЬНО! (из-за него я настрадался при подключении React)
2) по BundleAnalizerPlugin - может не сработать, а вернее не сработает, если импортируете так, как показано в уроке. Делайте так:
- const BundleAnalizerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
3) решения по остальным несостыковкам, возникающим в связи с развитием webpack с момента записи урока - ищите в комментариях

а сейчас нам вебпак нужен вообще? нпм же есть, в котором вебпак итак под капотом работает

И ошибки с papaparse тоже теперь нет. Сразу работает

Спасибо большое! Отличный курс получился.

Почему при сборке проекта вебпак собирает только index.js?
(()=>{const o=new Post("Webpack post");console.log(o.toString())})();
Не видит ни Post.js ни analytics.js?
В чем проблема?

Классный урок!

Ну вот опять встретились!)) Когда нужна помощь в освоении гитхаб, то Минини. И здесь с webpack`ом опять Минин)))

У кого при использовании devServer не обновляется страница, в package.json добавьте devServer{hot: false}.

Подскажите, ещё актуально?