aio350 Oct 20 2020 at 13:03

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

10 min

201K

Website development*JavaScript*Programming*

Translation

+15

Comments 12

raamid Oct 26 2020 at 03:31

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

LEXA_JA Oct 26 2020 at 11:22

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

raamid Oct 26 2020 at 16:54

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

LEXA_JA Oct 26 2020 at 17:17

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

Psychosynthesis Apr 8 2021 at 22:52

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

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

black1277 Oct 17 2021 at 13:17

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

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

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

DreamShaded Dec 18 2021 at 11:27

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

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

Xemylian Apr 21 2023 at 14:03

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

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

Вместо

post-css-preset-env

нужно

postcss-preset-env.

rapackivi Apr 21 2023 at 14:03

Привет всем. Прошел шаг за шагом этот туториал.
Нашел некоторые ошибки. Без них статья станет вообще блеск.
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 Apr 21 2023 at 14:04

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

Alexey23 Apr 21 2023 at 14:05

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 Apr 21 2023 at 14:06

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

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

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

Show the best of all time