Урок 1. Настройка и установка webpack


Содержание материала:

Урок 1. Настройка и установка webpack

Хорошей практикой в современной Web-разработке является применение инструментов, которые помогут упростить и ускорить процесс разработки, а также подготовить файлы проекта для боевого сервера.

Для этих целей, вы можете использовать такие системы для автоматизации задач, как Grunt или Gulp, создавая цепочку таких преобразования, которые, например, минимизируют ваш CSS или JavaScript код, соединять в единый файл и т.д.

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

Именно об этом способе мы поговорим в статье.

Что такое Webpack?

Webpack можно охарактеризовать, как “сборщик модулей”. Он берет JavaScript модули с необходимыми зависимостями, и затем соединяет их вместе как можно более эффективным способом, на выходе создавая единый JS-файл. На первый взгляд – ничего особого, не так ли? Например, такие инструменты, как RequreJS позволяют делать подобные вещи вот уже много лет.

Весь трюк заключается вот в чем. Webpack не ограничен в использовании только JavaScript модулей. Применяя специальные Загрузчики, Webpack понимает, что JavaScript модулям могут потребоваться для их работы, например, CSS файлы, а им, в свою очередь, изображения. При этом, результат работы Webpack будет содержать только те ресурсы, которые действительно нужны для работы приложения.

Давайте произведем установку Webpack, чтобы посмотреть его работу в действии.

Установка Webpack

Как и большинству инструментов Web-разработчика, Webpack требует для своей работы установленный Node.js. Если Node.js у вас уже настроен, то все, что нужно сделать для установки Webpack – это выполнить следующую команду в консоли:

Данная команда установит Webpack глобально в вашей системе, что позволит запускать его из любого места. Далее, внутри директории нашего проекта, создадим файл index.html с начальной разметкой:

Важной частью этого кода является ссылка на файл bundle.js , который будет содержать в себе результат работы Webpack. Также обратите внимание на пустой элемент h2 – он нам пригодится позднее.

Теперь создадим пару файлов в корневой директории проекта. Имя первого файла будет main.js и он послужит входной точкой для приложения. Второй файл назовем, например, say-hello.js . В него мы поместим простой код модуля, который будет принимать имя человека, DOM-элемент и выводить приветственное сообщение.

После того, как мы создали наш небольшой модуль, вызовем его из main.js . Сделать это очень просто:

Если бы мы сейчас открыли в браузере наш HTML-файл, то никакого вывода сообщения не произойдёт, т.к. мы ни подключили файл main.js , ни произвели сборку зависимостей для браузера. Всё, что нам нужно сделать – это указать Webpack на main.js файл, чтобы он подтянул все зависимости. Если это сделать, то Webpack произведет сборку этих файлов в единый файл bundle.js , который мы сможем использовать в браузере.

Вернемся в терминал, и просто выполним такую команду:

Первый файл определяет начальную точку приложения, в которой Webpack будет искать все зависимости. Это сработает и в том случае, если в вызываемых зависимостях есть свои зависимости от других модулей – до тех пор, пока не подключатся абсолютно все необходимые модули. Таким образом, на выход получится один файл bundle.js со всем модулями.

После выполнения этой команды, в консоли должен быть, примерно, вот такой результат:

Теперь откройте index.html в браузере, и вы увидите результат работы приложения.

Настройка Webpack

Как вы могли заметить, определять каждый раз входной и выходной файл для Webpack – это не слишком большое удовольствие. К счастью, Webpack прекрасно настраивается с помощью конфигурационного файла. Для этого создадим в корневой директории файл webpack.config.js со следующим содержимым:

После этого достаточно всего лишь ввести команду webpack и мы получим такой же результ.

Локальный сервер для разработки

Как известно, если что-то может быть автоматизировано, то почему этого не сделать? Пусть программа делает за нас всю рутинную работу, например, следит за изменениями в коде, и сама обновляет страницу в браузере. Давайте установим небольшой сервер для разработки, чтобы процесс создания программы проходил более эффективно. В терминале выполним команду установки:

А затем запустим сервер командой webpack-dev-server . Эта команда старует простой Web-сервер, который будет обслуживать текущую директорию нашего проекта. Откроем в браузере новую вкладку по ссылке http://localhost:8080/webpack-dev-server/, и, если всё сделано правильно, то мы увидим примерно следующее:

Теперь у нас есть не только этот замечательный сервер, но и немного магии, благодаря которой, при любом изменении в коде приложения, будет произведена пересборка проекта и обновлена страница в браузере. И всё работает практически без какой-либо дополнительной настройки.

Попробуйте, например, изменить передаваемое имя в sayHello функцию, и вы увидите, как изменения немедленно происходят в окне браузера.

Загрузчики

Одной из самых важных особенностей Webpack, является возможность использовать Загрузчики. Загрузчики являются аналогами “задач” (tasks) в Grunt и Gulp. По существу, они принимают содержимое файлов, а затем преобразуют его необходимым образом и включают результат преобразования в общую сборку.

Например, нам бы хотелось использовать некоторые возможность ES2015 в нашем коде. ES2015 – это новая версия JavaScript, которая полностью не поддерживается в браузерах. Поэтому, нам необходимо использовать Загрузчик для трансформации нашего ES2015 кода в старый ES5, который работает во всех браузерах. Чтобы сделать это, мы будем использовать одни из самых популярных Загрузчиков – Babel, и в соответствии с инструкцией, установим его командой:

Но прежде не забудем инициализировать npm командой npm init .

После установки Babel, у нас будет не только Загрузчик, но и все нужные для работы зависимости, пресеты для ES2015, чтобы Babel знал тип JavaScript для преобразования. Теперь, когда Загрузчик установлен, нам необходимо указать Babel конфигурацию для его использования. Обновим файл webpack.config.js :

В этом коде есть несколько важных вещей, на которые стоит обратить внимание. Строчка с кодом test: /\.js$/ является регулярным выражением, которым мы указываем применение данного Загрузчика только к .js файлам. Подобно этому, мы исключаем директорию node_modules с помощью кода exclude: /node_modules/ . В строках кода loader и query всё ясно само по себе – используем загрузчик с именем Babel и применяем пресет для ES2015.

Остановим наш веб-сервер комбинацией клавиш Ctrl+C и снова выполним команду webpack-dev-server . Теперь протестируем работу Загрузчика и напишем немного ES6 кода. Изменим в файле main.js вызов модуля на присвоение возвращаемого результата в константу вместо переменной:

После сохранения, Webpack должен самостоятельно пересобрать наше приложение и обновить страницу в браузере. В результате, на первый взгляд, ничего не изменилось. Но если мы взглянем на содержимое файла bundle.js , то найдем, что написанный нами ES6 код преобразовался с помощью Babel в старый добрый JavaScript.

Топ-пост этого месяца:  Резервное копирование WordPress сайта без плагинов

Во второй части…

В продолжении этой статьи, мы посмотрим на то, как использовать Webpack для обработки CSS и изображений, а также, как подготовить приложение для размещения его на боевом сервере.

При создании статьи были использованы следующие источники:

Руководство по Webpack для новичков

В этом руководстве я познакомлю вас со всеми основными понятиями Webpack, которые помогут начать работу с этим сборщиком модулей.

В данном руководстве используется webpack 4.30.

Что такое Webpack?

Webpack – это статический модульный сборщик. В проекте он обрабатывает все файлы и ресурсы как модули. При этом сборщик опирается на граф зависимостей, в котором описывается взаимосвязь модулей с помощью ссылок (операторы require и import ).

Таким образом, webpack статически перемещается по всем модулям для построения графа и использует его для генерации одного бандла

Бандл – это файл JavaScript, содержащий код из всех модулей проекта и объединенных в правильном порядке. Когда webpack создает граф зависимостей, он не выполняет исходный код, а объединяет модули и их зависимости в бандл.

Базовые понятия Webpack

  • Entry – модуль, который используется для построения внутреннего графа зависимостей. С его помощью webpack определяет, от каких модулей и библиотек зависит точка входа (напрямую и не напрямую). Затем включает их в граф, пока не останется ни одной зависимости. По умолчанию для свойства entry установлено значение ./src/index.js . Но можно указать другой модуль в файле конфигурации сборщика.
  • Output – это свойство указывает, где webpack должен сохранять бандл и как называть его файл (или файлы). Значением по умолчанию является ./dist/main.js для основного бандла и ./dist для других сгенерированных файлов.
  • Загрузчики. По умолчанию webpack понимает только файлы JavaScript и JSON. Чтобы обработать другие типы файлов и конвертировать их в модули, сборщик использует загрузчики. Например, загрузчик может трансформировать файлы из языка CoffeeScript в JavaScript или встроенные изображения в URL-адреса. С помощью загрузчиков можно даже импортировать CSS-файлы прямо из модулей JavaScript.
  • Плагины. Используются для задач, которые не могут выполнять загрузчики.
  • Режимы. Webpack позволяет настроить режим на development , production или none . Благодаря этому он может использовать встроенные оптимизации для каждой среды. По умолчанию установлено значение Режим none означает, что все опции оптимизации по умолчанию будут отключены. Чтобы узнать больше об опциях, которые webpack использует в development и production , посетите страницу конфигурации режимов .

Как работает Webpack

В любом веб-проекте есть файлы HTML, CSS, JavaScript, ресурсы, как шрифты, изображения и т.д. Таким образом, рабочий процесс webpack включает в себя настройку файла index.html с соответствующими ссылками на CSS, JavaScript и необходимые ресурсы.

При выполнении задач webpack опирается на конфигурацию. Они прописаны в файле webpack.config.js . В нем указано, как файлы и ресурсы следует трансформировать.

В соответствии с предоставленной конфигурацией webpack запускается с точек входа и обрабатывает каждый модуль, с которым сталкивается, при построении графа зависимостей.

Если модуль содержит зависимости, процесс выполняется рекурсивно для каждой зависимости. Затем webpack объединяет все модули проекта в небольшое количество бандлов (обычно только один), чтобы их можно было загрузить в браузер.

Приступим

Файлы нашего проекта можно найти в репозитории на Github .

Сначала создадим новый каталог и перейдем в него. Затем инициализируем новый проект:

После этого нужно локально установить webpack и webpack CLI:

Теперь код сгенерированного файла package.json должен выглядеть следующим образом:

Также webpack можно использовать в качестве менеджера задач. Для этого нужно разместить задачу и ее инструкции в разделе scripts файла package,json . Попробуем сделать это прямо сейчас. Откройте файл package.json и измените объект scripts следующим образом:

Свойство scripts позволяет ссылаться на локально установленные пакеты npm по их именам. Мы используем его и флаг —mode для определения задач dev и build , которые будут запускать webpack в режиме разработки ( npm run dev ) и производства ( npm run build ) соответственно.

Создадим каталог src и поместим в него файл index.js . Теперь мы можем запустить задачу dev , чтобы webpack работал в режиме разработки:

Отобразим результат работы сборщика в браузере. Для этого создадим файл index.html в каталоге dist :

Теперь, если мы откроем этот файл в браузере, то увидим сообщение Hello webpack .

В некоторых случаях создание файла index.html вручную может быть проблематичным. Например, если мы изменим имя точки входа, то сгенерированный пакет будет переименован. Но файл index.html по-прежнему будет ссылаться на старое имя. Поэтому нужно будет вручную обновлять HTML- файл каждый раз, когда понадобится переименовать точку входа или добавить новую. Этого можно избежать с помощью html-webpack-plugin. Установите этот плагин:

Чтобы активировать плагин, создайте файл webpack.config.js и поместите в него следующий код:

Чтобы активировать плагин webpack, нужно включить его и добавить в массив plugins . При необходимости передаем плагину необходимые параметры.

Запустим сборку и посмотрим на результат:

Откроем файл index.html . Как видим, плагин автоматически создает обновленный файл index.html , который использует параметр title из конфигурации:

Теперь определим пользовательские имена для свойств input и output . В webpack.config.js перед свойством plugins добавляем следующий код:

После этого создадим файл src/component.js :

Переименуем index.js в app.js , чтобы отразить внесенные изменения, и заменяем его содержимое следующим кодом:

Теперь запустим webpack:

Изучим и проясним для себя информацию из вывода, предоставляемого webpack. Вверху указаны хэш сборки, версия webpack и время выполнения сборки.

Далее идет перечень файлов, сгенерированных в каталоге dist ( index.html и main.bundle.js ). Под ним расположен модуль ввода ( app.js ) и его зависимость ( component.js ). Вывод после Child html-webpack-plugin for «index.html»: относится к работе html-webpack-plugin . Поэтому его игнорировать.

Теперь в папке dist есть новый сгенерированный пакетный файл main.bundle.js . Если открыть файл index.html в браузере, то мы увидим сообщение Hello webpack . Кроме этого в коде файла index.html изменилось значение атрибута src в теге script на main.bundle.js .

Работа со скриптами

Мы рассмотрим, как перенести ES6 в ES5-совместимый код, который работает во всех браузерах. Начнем с выполнения приведенной ниже команды:

Затем откроем файл main.bundle.js :

Современные функции из стандарта JavaScript ES6 (стрелочная функция и объявление const ) из модуля component.js по умолчанию не преобразованы в ES5-совместимый код. Чтобы код работал в более старых браузерах, необходимо добавить загрузчик Babel:

Затем в файле webpack.config.js добавьте module после свойства output :

При определении правил для загрузчика webpack нужно установить три основных свойства:

  • test – описывает, какие файлы следует трансформировать.
  • exlude – определяет, какие файлы из загрузчика не следует обрабатывать.
  • use – указывает, какой загрузчик следует использовать для сопоставленных модулей.

Еще раз введите приведенную ниже команду:

На этот раз код в файле main.bundle.js компилируется в следующий:

Теперь мы можем использовать современные функции JavaScript. При этом webpack преобразует код так, чтобы его могли выполнять устаревшие браузеры.

Работа со стилями

Чтобы добавить CSS в проект, потребуются два загрузчика:

css-loader преобразует CSS-код в JavaScript и разрешает любые зависимости, а style-loader выводит CSS в теге в HTML- документе.

Добавим в файл webpack.config.js необходимую конфигурацию:

Создадим файл src/style.css :

Затем импортируем его в файл app.js :

Когда мы запустим webpack, а затем откроем файл index.html , сообщение « Hello webpack будет красного цвета.

Управление ресурсами

Далее мы рассмотрим пример с изображениями. Сначала нужно установить загрузчик файлов:

Затем добавить новое правило в файл webpack.config.js:

Чтобы протестировать загрузчик, создадим файл image-component.js в каталоге src со следующим кодом:

Здесь мы импортируем изображение как модуль и используем его в теге . Нужно поместить это изображение в каталог src .

После этого импортируем компонент изображения в файл app.js :

Теперь, когда мы запустим webpack и откроем страницу, над сообщением Hello webpack будет выводиться изображение.

Топ-пост этого месяца:  Как создать адаптивный макет сайта с помощью обтеканий

Ускорение процесса разработки с помощью webpack-dev-server

Нам приходиться перестраивать проект всякий раз, когда вносим какие-то изменения в код. К счастью, webpack предоставляет веб-сервер, который автоматически создает и обновляет страницу. Чтобы установить его, запустите приведенную ниже команду:

Чтобы использовать сервер, нужно обновить dev -скрипт в файле package.json :

А затем настроить сервер в файле webpack.config.js , добавив следующее свойство:

После этого webpack-dev-server начинает обслуживать файлы из каталога dist и автоматически открывать страницу входа.

Теперь при запуске webpack ( npm run dev ) мы увидим, как страница открывается в браузере автоматически на localhost: 8080 :

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

Очистка вывода

По мере расширения проекта папка dist становится дольно объемной. При каждой сборке webpack будет генерировать бандлы, и помещать их в папку dist . Но при этом сборщик не отслеживает, какие файлы используются в проекте по факту. Поэтому рекомендуется очищать папку dist перед каждой сборкой, чтобы генерировались только используемые файлы. Для этого нужно установить и настроить clean-webpack-plugin:

Затем запустите webpack ( npm run build ) и проверьте папку dist . Теперь вы увидите в ней только файлы, сгенерированные из сборки. В нашем случае файл, который следует удалить, это main.js .

Заключение

Webpack – это полезный и мощный инструмент. В данном руководстве представлены только его базовые возможности. Но webpack способен на большее. Вот список ресурсов для дальнейшего изучения возможностей сборщика:

  • Официальная документация webpack .

Данная публикация представляет собой перевод статьи « A Beginner’s Guide to Webpack » , подготовленной дружной командой проекта Интернет-технологии.ру

Настройка webpack + babel (yarn / npm)

Настройка webpack + babel (yarn / npm)

1. Необходимо установить node.js
2. Необходимо установить yarn

Генерируем файл package.json

Автоматическая генерация файла

Ручная генерация с вводом параметров

Установка и настройка webpack

Локальная установка webpack

После добавляем в файл package.json строки

Примерный вид того, что должно получиться (при использование yarn)

Установим необходимые плагины для webpack

Устанавливаем через командную строку

Команды для yarn

Команды для node.js

Настройка конфига webpack

Необходимо создать файл webpack.config.js в корневой директории вашего проекта.

Структура проекта

Структура сборщика проекта должна получится следующей

-Корневой каталог проекта

Недостающие файлы и папки необходимо создать

Запуск и тестирование сборщика проекта

Добавим код в src/index.html

В src/index.js добавим

Для сборки проекта в консоли прописываем

После выполненной команды в корневой директории появится папка dist со собранным проектом

Урок 1. Webpack 4+. Настройка и установка Webpack

Просмотров: 7 491

12 февраля 2020

Мурагер Акишев

Единственный урок который помог

Chrispi Chris

спасибо за видео. с первого раза почему-то не получилось, наверное, была опечатка у меня в коде из-за невнимательности.
+часто смотрю сайт webformyself — и очень часто нахожу годную, понятно описанную информацию. спасибо!

Никита Киселев

У меня была ошибка: «выполнение сценариев отключено в этой системе».
В терминале написал команду > Set-ExecutionPolicy RemoteSigned -Scope Process
Помогло:)

Михаил Журавлёв

Как я только не устанавливал и глобально и нет один фиг webpack не является внутенней или внешней командой

Александр Волошин

Сделал все в точности как на видео, и Webpack заработал.
Но почему-то в место файла bundle.js, Webpack создал файл main.js
В чем может быть проблема?

Дима Артюхов

Почему то не срабатывает команда webpack в терминале (ошибка: Имя «webpack» не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку), помогите разобраться

Dimitir Popovich

Подскажите почему может быть что вместо файла bundle.js создается main.js ?

Максим Иванов

нашел ошибку — 7,47 «правую часть» не правую а левую

Artem Kurdin

Влад, почему вы убрали с сайта webformyself курс «Yii2 с нуля до профи» ?


Artem Kurdin

Спасибо за урок! Хочется больше видео по webpack!

Дима Рапид

Дима Рапид

что за плагин указывающий на вложенность скобок разными цветами?

Дима Рапид

глупый вопрос, что за плагин который вложенность скобок показывает?

Урок 1. Webpack 4+. Настройка и установка Webpack

Просмотров: 7 491

12 февраля 2020

Мурагер Акишев

Единственный урок который помог

Chrispi Chris

спасибо за видео. с первого раза почему-то не получилось, наверное, была опечатка у меня в коде из-за невнимательности.
+часто смотрю сайт webformyself — и очень часто нахожу годную, понятно описанную информацию. спасибо!

Никита Киселев

У меня была ошибка: «выполнение сценариев отключено в этой системе».
В терминале написал команду > Set-ExecutionPolicy RemoteSigned -Scope Process
Помогло:)

Михаил Журавлёв

Как я только не устанавливал и глобально и нет один фиг webpack не является внутенней или внешней командой

Александр Волошин

Сделал все в точности как на видео, и Webpack заработал.
Но почему-то в место файла bundle.js, Webpack создал файл main.js
В чем может быть проблема?

Дима Артюхов

Почему то не срабатывает команда webpack в терминале (ошибка: Имя «webpack» не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку), помогите разобраться

Dimitir Popovich

Подскажите почему может быть что вместо файла bundle.js создается main.js ?

Максим Иванов

нашел ошибку — 7,47 «правую часть» не правую а левую

Artem Kurdin

Влад, почему вы убрали с сайта webformyself курс «Yii2 с нуля до профи» ?

Artem Kurdin

Спасибо за урок! Хочется больше видео по webpack!

Дима Рапид

Дима Рапид

что за плагин указывающий на вложенность скобок разными цветами?

Дима Рапид

глупый вопрос, что за плагин который вложенность скобок показывает?

Урок 1. Webpack 4+. Настройка и установка Webpack

Просмотров: 7 491

12 февраля 2020

Мурагер Акишев

Единственный урок который помог

Chrispi Chris

спасибо за видео. с первого раза почему-то не получилось, наверное, была опечатка у меня в коде из-за невнимательности.
+часто смотрю сайт webformyself — и очень часто нахожу годную, понятно описанную информацию. спасибо!

Никита Киселев

У меня была ошибка: «выполнение сценариев отключено в этой системе».
В терминале написал команду > Set-ExecutionPolicy RemoteSigned -Scope Process
Помогло:)

Михаил Журавлёв

Как я только не устанавливал и глобально и нет один фиг webpack не является внутенней или внешней командой

Александр Волошин

Сделал все в точности как на видео, и Webpack заработал.
Но почему-то в место файла bundle.js, Webpack создал файл main.js
В чем может быть проблема?

Дима Артюхов

Почему то не срабатывает команда webpack в терминале (ошибка: Имя «webpack» не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку), помогите разобраться

Dimitir Popovich

Подскажите почему может быть что вместо файла bundle.js создается main.js ?

Максим Иванов

нашел ошибку — 7,47 «правую часть» не правую а левую

Artem Kurdin

Влад, почему вы убрали с сайта webformyself курс «Yii2 с нуля до профи» ?

Artem Kurdin

Спасибо за урок! Хочется больше видео по webpack!

Дима Рапид

Дима Рапид

что за плагин указывающий на вложенность скобок разными цветами?

Дима Рапид

глупый вопрос, что за плагин который вложенность скобок показывает?

Урок 1. Webpack 4+. Настройка и установка Webpack

Показать панель управления

Продолжение курса по Webpack 4+ тут: https://webformyself.com/category/premium/javascript-premium/webpackpremium/

В этом уроке вы узнаете, что такое webpack, способ его установки и минимальную необходимую конфигурацию.

В данном уроке вы узнаете про то, что такое Webpack, в каких проектах он применяется.

В результате урока вы установите Webpack и напишите минимально необходимую конфигурацию, которая позволит собирать проект в 2х режимах: оптимизированной сжатой версии и в режиме разработки.

Топ-пост этого месяца:  Редакции WordPress, ревизии и автосохранение

Источник: https://youtu.be/LuOEtywkrqM

    1. RUclip
    2. WebForMySelf
    3. Урок 1. Webpack 4+. Настройка и установка Webpack
  • Комментарии

    WebForMySelf

    Продолжение курса по Webpack 4+ тут: https://webformyself.com/category/premium/javascript-premium/webpackpremium/

    Мурагер Акишев

    Единственный урок который помог

    Chrispi Chris

    спасибо за видео. с первого раза почему-то не получилось, наверное, была опечатка у меня в коде из-за невнимательности.
    +часто смотрю сайт webformyself — и очень часто нахожу годную, понятно описанную информацию. спасибо!

    Никита Киселев

    У меня была ошибка: «выполнение сценариев отключено в этой системе».
    В терминале написал команду > Set-ExecutionPolicy RemoteSigned -Scope Process
    Помогло:)

    Михаил Журавлёв

    Как я только не устанавливал и глобально и нет один фиг webpack не является внутенней или внешней командой

    ex btrg

    на learn.js есть отличный бесплатный скринкаст) https://learn.javascript.ru/screencast/webpack#webpack-1-intro

    Саня Саня

    При написании в консоли ‘webpack «выдает следующую ошибку:

    Hash: 4c094a545d2751b842ae
    Version: webpack 4.35.0
    Time: 86ms
    Built at: 2020-06-23 12:07:58
    1 asset
    Entrypoint main = bundle.js
    [0] ./src/index.js 261 bytes <0>[built] [failed] [1 error]

    WARNING in configuration
    The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environme
    nt.
    You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

    ERROR in ./src/index.js 1:2
    Module parse failed: Unexpected token (1:2)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    > 1 console.log(‘Hello world!’);

    можете подсказать почему?
    все делал строго за Вами!

    Александр Волошин

    Сделал все в точности как на видео, и Webpack заработал.
    Но почему-то в место файла bundle.js, Webpack создал файл main.js
    В чем может быть проблема?

    Дима Артюхов

    Почему то не срабатывает команда webpack в терминале (ошибка: Имя «webpack» не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку), помогите разобраться

    Dimitir Popovich

    Подскажите почему может быть что вместо файла bundle.js создается main.js ?

    Максим Иванов

    нашел ошибку — 7,47 «правую часть» не правую а левую

    Artem Kurdin

    Влад, почему вы убрали с сайта webformyself курс «Yii2 с нуля до профи» ?

    Artem Kurdin

    Спасибо за урок! Хочется больше видео по webpack!

    Урок 1. Webpack 4+. Настройка и установка Webpack

    प्लेयर नियंत्रण दिखाएं

    • 12/02/2020 को प्रकाशित
    • Продолжение курса по Webpack 4+ тут: webformyself.com/category/premium/javascript-premium/webpackpremium/
      В этом уроке вы узнаете, что такое webpack, способ его установки и минимальную необходимую конфигурацию.

    В данном уроке вы узнаете про то, что такое Webpack, в каких проектах он применяется.
    В результате урока вы установите Webpack и напишите минимально необходимую конфигурацию, которая позволит собирать проект в 2х режимах: оптимизированной сжатой версии и в режиме разработки.

    टिप्पणियाँ • 25

    Продолжение курса по Webpack 4+ тут: webformyself.com/category/premium/javascript-premium/webpackpremium/

    Единственный урок который помог

    спасибо за видео. с первого раза почему-то не получилось, наверное, была опечатка у меня в коде из-за невнимательности.
    +часто смотрю сайт webformyself — и очень часто нахожу годную, понятно описанную информацию. спасибо!

    У меня была ошибка: «выполнение сценариев отключено в этой системе».
    В терминале написал команду > Set-ExecutionPolicy RemoteSigned -Scope Process
    Помогло:)

    Как я только не устанавливал и глобально и нет один фиг webpack не является внутенней или внешней командой

    на learn.js есть отличный бесплатный скринкаст) learn.javascript.ru/screencast/webpack#webpack-1-intro

    При написании в консоли ‘webpack «выдает следующую ошибку:

    Hash: 4c094a545d2751b842ae
    Version: webpack 4.35.0
    Time: 86ms
    Built at: 2020-06-23 12:07:58
    1 asset
    Entrypoint main = bundle.js
    [0] ./src/index.js 261 bytes <0>[built] [failed] [1 error]

    WARNING in configuration
    The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environme
    nt.
    You can also set it to ‘none’ to disable any default behavior. Learn more: webpack.js.org/configuration/mode/

    ERROR in ./src/index.js 1:2
    Module parse failed: Unexpected token (1:2)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See webpack.js.org/concepts#loaders
    > 1 console.log(‘Hello world!’);

    можете подсказать почему?
    все делал строго за Вами!

    Урок 1. Webpack 4+. Настройка и установка Webpack

    Показать панель управления

    Продолжение курса по Webpack 4+ тут: https://webformyself.com/category/premium/javascript-premium/webpackpremium/

    В этом уроке вы узнаете, что такое webpack, способ его установки и минимальную необходимую конфигурацию.

    В данном уроке вы узнаете про то, что такое Webpack, в каких проектах он применяется.

    В результате урока вы установите Webpack и напишите минимально необходимую конфигурацию, которая позволит собирать проект в 2х режимах: оптимизированной сжатой версии и в режиме разработки.

    Источник: https://youtu.be/LuOEtywkrqM

    1. RUclip
    2. WebForMySelf
    3. Урок 1. Webpack 4+. Настройка и установка Webpack
  • Комментарии

    WebForMySelf

    Продолжение курса по Webpack 4+ тут: https://webformyself.com/category/premium/javascript-premium/webpackpremium/

    Мурагер Акишев

    Единственный урок который помог

    Chrispi Chris

    спасибо за видео. с первого раза почему-то не получилось, наверное, была опечатка у меня в коде из-за невнимательности.
    +часто смотрю сайт webformyself — и очень часто нахожу годную, понятно описанную информацию. спасибо!

    Никита Киселев

    У меня была ошибка: «выполнение сценариев отключено в этой системе».
    В терминале написал команду > Set-ExecutionPolicy RemoteSigned -Scope Process
    Помогло:)

    Михаил Журавлёв

    Как я только не устанавливал и глобально и нет один фиг webpack не является внутенней или внешней командой

    ex btrg

    на learn.js есть отличный бесплатный скринкаст) https://learn.javascript.ru/screencast/webpack#webpack-1-intro

    Саня Саня

    При написании в консоли ‘webpack «выдает следующую ошибку:

    Hash: 4c094a545d2751b842ae
    Version: webpack 4.35.0
    Time: 86ms
    Built at: 2020-06-23 12:07:58
    1 asset
    Entrypoint main = bundle.js
    [0] ./src/index.js 261 bytes <0>[built] [failed] [1 error]

    WARNING in configuration
    The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environme
    nt.
    You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

    ERROR in ./src/index.js 1:2
    Module parse failed: Unexpected token (1:2)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    > 1 console.log(‘Hello world!’);

    можете подсказать почему?
    все делал строго за Вами!

    Александр Волошин

    Сделал все в точности как на видео, и Webpack заработал.
    Но почему-то в место файла bundle.js, Webpack создал файл main.js
    В чем может быть проблема?

    Дима Артюхов

    Почему то не срабатывает команда webpack в терминале (ошибка: Имя «webpack» не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку), помогите разобраться

    Dimitir Popovich

    Подскажите почему может быть что вместо файла bundle.js создается main.js ?

    Максим Иванов

    нашел ошибку — 7,47 «правую часть» не правую а левую

    Artem Kurdin

    Влад, почему вы убрали с сайта webformyself курс «Yii2 с нуля до профи» ?

    Artem Kurdin

    Спасибо за урок! Хочется больше видео по webpack!

    Урок 1. Webpack 4+. Настройка и установка Webpack

    Смотреть видео Урок 1. Webpack 4+. Настройка и установка Webpack онлайн, скачать на мобильный.

    210 | 4
    WebForMySelf | 9 мес. назад

    Продолжение курса по Webpack 4+ тут: https://webformyself.com/category/premium/javascript-premium/webpackpremium/

    В этом уроке вы узнаете, что такое webpack, способ его установки и минимальную необходимую конфигурацию.

    В данном уроке вы узнаете про то, что такое Webpack, в каких проектах он применяется.

    В результате урока вы установите Webpack и напишите минимально необходимую конфигурацию, которая позволит собирать проект в 2х режимах: оптимизированной сжатой версии и в режиме разработки.

    Добавить комментарий