Настройка Webpack 5 с нуля

[raamid]

А есть ли способ делать сборку проекта и перезапуск dev-сервера по сообщению из сети? Если, к примеру, работа с проектом происходит в одной машине, сборка проекта в другой (виртуальной). В этом случае отслеживание сохранения файлов не работает и приходится слать сообщения по сети.
Я сделал что-то вроде велосипеда на костылях, когда запускается watcher на машине, где редактируются файлы, посылается запрос в виртуалку, где http-сервер принимает запрос, убивает старый процесс dev-сервера, делает перекомпиляцию и запускает новый dev-server.
Но что-то подсказывает мне, что это путешествие через Шанхай в Москву и есть какое-то более правильное решение.
Если внезапно, кому-то будет интересно мое решение, пишите, приведу в порядок скрипты и выложу.

[LEXA_JA]

У вебпака есть програмный API, и у webpack-dev-server тоже
соответственно можно поднять свой express и и приделать API для перезапуска. В теории должно быть можно так сделать, но знаю насколько просто.
Мы использовали такое когда в там ещё не было встроенного прокси.

[raamid]

Я собственно что-то подобное и сделал, только без express, на node + http. А насчет webpack middleware, я тоже его смотрел, мне он показался перспективным в плане решения моей задачи, но проще для меня оказалось сделать простой скрипт на node.

[LEXA_JA]

Если использовать webpack-dev-middleware то (вроде бы) можно сделать это без перезапуска процесса, а просто заставить сработать watcher, что будет немного быстрее и всё in-memory состояние сохраниться. Но если всё уже работет, то смысла переделывать наверное уже нет.

[Psychosynthesis]

«Для продакшна следует использовать MiniCssExtractPlugin вместо style-loader, который экспортирует минифицированный CSS.»

Такой себе совет, на самом деле… Не знаю уж как оно работает без использования SSR, но, например, с Next.js подружить MiniCssExtractPlugin крайне тяжело… Проще связка extract-loader и file-loader (хотя с ними тоже не всё хорошо).

[black1277]

Эта строка вызывает ошибку:

contentBase: path.resolve(__dirname, './dist'),

без нее работает нормально.

[DreamShaded]

теперь это так настраивается:

devServer: {
    port: 9000,
    hot: true,
    static: {
      directory: path.join(__dirname, './dist'),
    },
  },

[Xemylian]

Спасибо большое за пост :)
У вас небольшая ошибка в этом фрагменте

// postcss.config.js
module.exports = {
    plugins: {
        'post-css-preset-env': {
            browsers: 'last 2 versions',
        },
    },
}

Вместо

post-css-preset-env

нужно

postcss-preset-env.

[rapackivi]

Привет всем. Прошел шаг за шагом этот туториал.
Нашел некоторые ошибки. Без них статья станет вообще блеск.
1.

const HtmlWebpackPlugin = require('html=webpack-plugin') 

//"=" вместо "-"
2.

p.textContent = `I like ${myGame.game}.`

//«name» вместо «game»
3.

module.exports = {
    plugins: {
        "post-css-preset-env" : {
            browsers: 'last 2 versions',
        },
    },
}

//«postcss-preset-env» вместо «post-css-preset-env»
4.

plugins: [
        // ...
        // применять изменения только при горячей перезагрузке
        new webpack.HotModuleReplacement(),
    ],

//«webpack.HotModuleReplacementPlugin()» вместо «webpack.HotModuleReplacement()»
5. Общее замечание. В начале статьи приводятся примеры установки модулей как через yarn так и npm. К концу статьи установка только через yarn. В оригинале нет yarn варианта. Автор перевода добавил его от себя, частично уничтожив npm варианты.
В оригинальной статье ошибки 1-4 не обнаружены. Так что это ошибки именно автора перевода.
Несмотря на это, я очень благодарен Вам, Игорь. Эти ошибки напомнили о моей первой первой книге по программированию «Осваиваем микрокомпьютер». Там были специальные опечатки — жуки.

[OlegDutchenko]

Неплохая статья, но объясните, зачем исключать директорию node_modules? Это какой-то устоявшийся стереотип, ещё начиная с первых версий вебпака. Сейчас есть множество библиотек и плагинов которые поставляются в "чистом виде": es6± или ts. Я бы не рекомендовал исключать. Если проблема в объеме, то почитайте доку Babel, там есть инструменты для кеширования.
Также на счёт стилей — я бы рекомендовал пакет sass вместо node-sass, так первый работает на dart-sass, а второй libsass, которой не поддерживает новые директивы use, forward и тд

[Alexey23]

yarn add -D babel-loader @babel/core @babel/preset-env @babel/babel-plugin-proposal-class-properties
Команда не сработала из-за несуществующего пакета babel/babel-plugin-proposal-class-properties. В оригинальной статье babel/plugin-proposal-class-properties

[le2xx]

Добрый день! А как быть если в index.html у меня есть

<img class="usd" src="assets/images/usd1.jpg" alt="usd">

как мне перенести src/assets в dist/assets в webpack 5?