как узнать версию webpack
Webpack за 15 минут
Webpack является одним из самых мощных и гибких инструментов для сборки frontend. Она содержит основные понятия, однако для начала их будет достаточно.
Инструменты сборки стали неотъемлемой частью веб-разработки, в основном из-за возрастающей сложности JS-приложений. Бандлеры позволяют нам упаковывать, компилировать, организовывать множество ресурсов и библиотек, необходимых для современного веб-проекта.
В этом гайде будет рассмотрен webpack, мощный бандлер с открытым исходным кодом, который может обрабатывать огромное количество различных задач. Автор статьи покажет вам как писать модули, бандл код, использовать некоторые плагины загрузчика. Пособие подойдет для тех, кто только начинает изучать этот инструмент, однако уже имеет некоторые знания JS.
Почему Webpack?
Как и во многих других аспектах веб-разработки, здесь нет стандартного набора инструментов, который нужно использовать. Прямо сейчас разработчики могут выбирать между webpack, Gulp, Browserify, NPM scripts, Grunt и еще десятком других. Можно, конечно, провести их глубокое сравнение, но в целом все эти инструменты очень похожи, поэтому чаще всего дело сводится к личным предпочтениям и типу проекта, над которым вы работаете.
Тут некоторые плюсы и минусы, которые помогут вам решить, подходит ли этот бандлер именно вам:
Установка
После того как вы установили бандлер, лучше всего запустить его с помощью скрипта Node.js. Добавьте эти строки в ваш package.json.
Config файл webpack’a
Здесь мы рассмотрим файл конфигурации в его самой базовой форме, но не позволяйте ему вас провести- файл конфигурации webpack достаточно мощный, довольно сильно различается от проекта к проекту и в некоторых случаях может стать ну очень сложным.
Как определить установленную версию webpack
Особенно во время перехода с webpack v1 на v2 было бы важно программно определить, какая версия webpack установлена, но я, похоже, не могу найти подходящую API.
6 ответов
Как определить установленную версию Apache Mesos? mesos help на cli не говорит. mesos help Usage: mesos [OPTIONS] Available commands: help log execute ps resolve cat local init-wrapper tail scp stop-cluster.sh start-masters.sh stop-slaves.sh slave start-cluster.sh stop-masters.sh.
Версия Установлена:
Использование команды npm list :
Результаты в name@version-range :
Использование команды списка пряжи :
Как это сделать программно?
Чтобы это сработало, нам нужно будет сделать две вещи:
DefinePlugin позволяет создавать глобальные константы, которые можно настроить во время компиляции.
Теперь мы можем получить доступ к глобальной константе следующим образом:
Доступна последняя версия:
Использование команды npm view вернет последнюю версию, доступную в реестре:
Для webpack использования:
Для тех, кто использует yarn
yarn list webpack сделает свое дело
Как определить версию Android SDK, установленную на моем компьютере?
Просто еще один способ, еще не упомянутый:
Если вы установили его локально в проект, откройте папку node_modules и проверьте свой модуль webpack.
Откройте файл package.json и посмотрите в разделе версия
При использовании Angular CLI v7+ версия webpack печатается в выводе ng version :
webpack 4 теперь предлагает свойство версии, которое можно использовать!
Затем войдите в консоль:
Ожидаемый результат должен выглядеть следующим образом:
Похожие вопросы:
Я не могу узнать, как определить версию Windows, установленную на съемном / ведомом диске. В своем поиске я обнаружил класс DriveInfo, который имеет некоторые аккуратные вещи, но не показывает мне.
Я пытаюсь проверить версию PIG, установленную на моем hadoop. Как мы можем увидеть версию pig, установленную на Hadoop? Есть ли какая-нибудь команда, чтобы увидеть это?
Как я могу определить версию java, установленную в системе через код java, если она не последняя, а затем загрузить и установить необходимую jre?
Как определить установленную версию Apache Mesos? mesos help на cli не говорит. mesos help Usage: mesos [OPTIONS] Available commands: help log execute ps resolve cat local.
Как определить версию Android SDK, установленную на моем компьютере?
Есть ли способ определить версию на Webpack, используемую внутри скрипта Node.js?
Я создаю что-то с Webpack для транспилирования и bundle для нескольких JS файлов. Однако я хотел бы знать, какую версию я использую. Предположим, что у меня он установлен глобально. Как бы я это.
Как найти версию Flutter, установленную на моем компьютере?
Webpack: основы настройки проекта на JavaScript и Sass
Важно разделять JavaScript и CSS-код на маленькие по объему части. Этим мы упрощаем себе и другим понимание и поддержку проекта. Браузеры, с другой стороны, предпочитают работать с маленьким количеством файлов, пускай длинными и слабо читаемыми. Здесь на помощь приходит Webpack.
Webpack — инструмент веб-разработчика, который соединяет JavaScript- и CSS-файлы в единое целое — файл, который часто называется «bundle» (с англ. «пачка»). В этой статье представлена инструкция по настройке среды для проекта на JavaScript и Sass.
Устанавливаем Node и npm
Webpack построен на Node.js, поэтому для его работы требуется запуск как Node, так и npm (node package manager — менеджер пакетов Node). Порядок действий:
При создании файла package.json просто нажимайте «Enter»: настройки по умолчанию приемлемые. Кроме того, при необходимости можно их изменить.
Когда package.json создан, вы увидите небольшой документ с настройками. В нём хранится всё, что нужно знать о себе проекту.
Добавляем Webpack
Выполняем следующий код, чтобы добавить Webpack к проекту.
После чего произойдёт 3 вещи:
Добавляем Webpack как скрипт
Добавляем следующий скрипт в package.json :
Теперь запускаем Webpack-версию проекта через npm, выполнив npm run build и npm run start в командной строке.
В документации Webpack глобальную установку не рекомендуют. Она вынуждает разработчика использовать во всех проектах определенную версию Webpack и приводит к краху, если использовать другую версию.
Как определить установленную версию webpack
Я создаю что-то с Webpack для транспилирования и bundle для нескольких JS файлов. Однако я хотел бы знать, какую версию я использую.
2 ответа
Как определить установленную версию Apache Mesos? mesos help на cli не говорит. mesos help Usage: mesos [OPTIONS] Available commands: help log execute ps resolve cat local init-wrapper tail scp stop-cluster.sh start-masters.sh stop-slaves.sh slave start-cluster.sh stop-masters.sh.
Из-за моей репутации я не могу комментировать. Но быстро хотел указать, как было предложено выше в правильном ответе:
npm view webpack version
Для локально установленных пакетов: npm list
Похожие вопросы:
Я не могу узнать, как определить версию Windows, установленную на съемном / ведомом диске. В своем поиске я обнаружил класс DriveInfo, который имеет некоторые аккуратные вещи, но не показывает мне.
Я пытаюсь проверить версию PIG, установленную на моем hadoop. Как мы можем увидеть версию pig, установленную на Hadoop? Есть ли какая-нибудь команда, чтобы увидеть это?
Как я могу определить версию java, установленную в системе через код java, если она не последняя, а затем загрузить и установить необходимую jre?
Как определить установленную версию Apache Mesos? mesos help на cli не говорит. mesos help Usage: mesos [OPTIONS] Available commands: help log execute ps resolve cat local.
Как определить версию Android SDK, установленную на моем компьютере?
Особенно во время перехода с webpack v1 на v2 было бы важно программно определить, какая версия webpack установлена, но я, похоже, не могу найти подходящую API.
Есть ли способ определить версию на Webpack, используемую внутри скрипта Node.js?
Как найти версию Flutter, установленную на моем компьютере?
В этом руководстве я познакомлю вас со всеми основными понятиями Webpack, которые помогут начать работу с этим сборщиком модулей.
В данном руководстве используется webpack 4.30.
Webpack-что это?
Webpack – это статический модульный сборщик. В проекте он обрабатывает все файлы и ресурсы как модули. При этом сборщик опирается на граф зависимостей, в котором описывается взаимосвязь модулей с помощью ссылок (операторы require и import ).
Таким образом, webpack статически перемещается по всем модулям для построения графа и использует его для генерации одного бандла
Бандл – это файл JavaScript, содержащий код из всех модулей проекта и объединенных в правильном порядке. Когда webpack создает граф зависимостей, он не выполняет исходный код, а объединяет модули и их зависимости в бандл.
Базовые понятия Webpack
Как работает Webpack
В любом веб-проекте есть файлы HTML, CSS, JavaScript, ресурсы, как шрифты, изображения и т.д. Таким образом, рабочий процесс webpack включает в себя настройку файла index.html с соответствующими ссылками на CSS, JavaScript и необходимые ресурсы.
В соответствии с предоставленной конфигурацией webpack запускается с точек входа и обрабатывает каждый модуль, с которым сталкивается, при построении графа зависимостей.
Если модуль содержит зависимости, процесс выполняется рекурсивно для каждой зависимости. Затем webpack объединяет все модули проекта в небольшое количество бандлов (обычно только один), чтобы их можно было загрузить в браузер.
Приступим
Сначала создадим новый каталог и перейдем в него. Затем инициализируем новый проект:
После этого нужно локально установить webpack и webpack CLI:
Теперь код сгенерированного файла package.json должен выглядеть следующим образом:
Отобразим результат работы сборщика в браузере. Для этого создадим файл index.html в каталоге dist :
В некоторых случаях создание файла index.html вручную может быть проблематичным. Например, если мы изменим имя точки входа, то сгенерированный пакет будет переименован. Но файл index.html по-прежнему будет ссылаться на старое имя. Поэтому нужно будет вручную обновлять HTML- файл каждый раз, когда понадобится переименовать точку входа или добавить новую. Этого можно избежать с помощью html-webpack-plugin. Установите этот плагин:
Чтобы активировать плагин, создайте файл webpack.config.js и поместите в него следующий код:
Запустим сборку и посмотрим на результат:
После этого создадим файл src/component.js :
Теперь запустим webpack:
Изучим и проясним для себя информацию из вывода, предоставляемого webpack. Вверху указаны хэш сборки, версия webpack и время выполнения сборки.
Работа со скриптами
Мы рассмотрим, как перенести ES6 в ES5-совместимый код, который работает во всех браузерах. Начнем с выполнения приведенной ниже команды:
Затем откроем файл main.bundle.js :
Современные функции из стандарта JavaScript ES6 (стрелочная функция и объявление const ) из модуля component.js по умолчанию не преобразованы в ES5-совместимый код. Чтобы код работал в более старых браузерах, необходимо добавить загрузчик Babel:
Затем в файле webpack.config.js добавьте module после свойства output :
При определении правил для загрузчика webpack нужно установить три основных свойства:
Еще раз введите приведенную ниже команду:
На этот раз код в файле main.bundle.js компилируется в следующий:
Теперь мы можем использовать современные функции JavaScript. При этом webpack преобразует код так, чтобы его могли выполнять устаревшие браузеры.
Работа со стилями
Чтобы добавить CSS в проект, потребуются два загрузчика:
css-loader преобразует CSS-код в JavaScript и разрешает любые зависимости, а style-loader выводит CSS в теге в HTML- документе.
Добавим в файл webpack.config.js необходимую конфигурацию:
Создадим файл src/style.css :
Затем импортируем его в файл app.js :
Управление ресурсами
Далее мы рассмотрим пример с изображениями. Сначала нужно установить загрузчик файлов:
Затем добавить новое правило в файл webpack.config.js:
Чтобы протестировать загрузчик, создадим файл image-component.js в каталоге src со следующим кодом:
После этого импортируем компонент изображения в файл app.js :
Теперь, когда мы запустим webpack и откроем страницу, над сообщением Hello webpack будет выводиться изображение.
Ускорение процесса разработки с помощью webpack-dev-server
Нам приходиться перестраивать проект всякий раз, когда вносим какие-то изменения в код. К счастью, webpack предоставляет веб-сервер, который автоматически создает и обновляет страницу. Чтобы установить его, запустите приведенную ниже команду:
После этого webpack-dev-server начинает обслуживать файлы из каталога dist и автоматически открывать страницу входа.
Теперь при запуске webpack ( npm run dev ) мы увидим, как страница открывается в браузере автоматически на localhost: 8080 :
Если изменить любой из исходных файлов и сохранить их, веб-сервер автоматически перезагрузит страницу после компиляции кода.
Очистка вывода
Заключение
Webpack – это полезный и мощный инструмент. В данном руководстве представлены только его базовые возможности. Но webpack способен на большее. Вот список ресурсов для дальнейшего изучения возможностей сборщика:
Пожалуйста, оставьте ваши комментарии по текущей теме материала. За комментарии, лайки, отклики, дизлайки, подписки низкий вам поклон!