Софт

Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.

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

Webpack — это инструмент для сборки JavaScript-приложений, который также применяется для обработки статических файлов — изображений, шрифтов и других ресурсов. У Webpack множество функций, которые легко расширяются с помощью добавления плагинов.

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

CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию. Для начала установите CopyWebpackPlugin в свой проект:

npm install copy-webpack-plugin --save-dev

После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  // ваша конфигурация Webpack здесь
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/assets'),
          to: path.resolve(__dirname, 'dist/assets')
        }
      ]
    })
  ]
};

В плагине содержится массив объектов patterns. Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.

Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.

Копирование нескольких файлов

Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns.

Каждый объект-шаблон содержит свойство from, оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  //ваша конфигурация Webpack здесь

  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/images', to: 'dist/images' },
        { from: 'src/index.html', to: 'dist' },
      ],
    }),
  ],
};

В примере первый объект-шаблон копирует каталог images из src в dist/images, а второй — копирует файл index.html из src в dist. Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.

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

Другие способы

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

Лоадер file-loader позволяет копировать статические файлы в указанную папку при сборке проекта. Чтобы использовать file-loader, установите его с помощью npm:

npm install file-loader --save-dev

Затем добавьте его в конфигурационный файл webpack.config.js:

module.exports = {
  // ... ваша конфигурация webpack ...

  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
            },
          },
        ],
      },
    ],
  },
};

В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.

Лоадерurl-loader работает аналогично file-loader, но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.

Для использования url-loader необходимо его установить:

npm install url-loader --save-dev

Затем добавить в конфигурационный файл webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images. Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.

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

Анимации помогают «оживить» сайт: делают его интереснее и отзывчивее. Но создавать их вручную не всегда удобно, потому что приходится тратить время на написание кода, сложные вычисления и трансформации. Гораздо проще использовать библиотеки с готовыми анимациями или инструментами, облегчающими создание эффектов.

ls

ls — команда для быстрого просмотра содержимого папки. Она имеет ряд опций для изменения вывода, таких как -l для длинного формата и -a для отображения скрытых файлов. Команда ls не умеет искать файлы или папки по определенным критериям, таким как имя, размер или содержимое.

ls -l — перечисляет файлы и папки в текущей папке в длинном формате, включая права доступа к файлам, права владения и временные метки. Выглядит это так:

➜  neural ls -l
total 0
-rw-r--r--  1 keks  staff   0 25 янв 16:54 keks.md
drwxr-xr-x  2 keks  staff  64 25 янв 16:54 meow
drwxr-xr-x  2 keks  staff  64 25 янв 16:54 suchscreenshot
drwxr-xr-x  2 keks  staff  64 25 янв 16:54 verywow
drwxr-xr-x  2 keks  staff  64 25 янв 16:54 wow
➜  neural

ls -a — выводит список всех папок и файлов (даже скрытых) внутри текущей папки.

cd

cd — команда для перехода в другую папку.

Примеры:

• cd /usr/local/bin — переход в папку /usr/local/bin
• cd .. — переход в папку на уровень выше.
• cd ~ — переход в домашнюю папку текущего пользователя.

cp

cp — команда для копирования файлов и папок. Она имеет опции для рекурсивного копирования папок (-r) и для сохранения атрибутов файлов (-p). Команда cp не умеет копировать между файловыми системами или по сети.

Примеры:

• cp file.txt /tmp — копирует файл file.txt в папку /tmp.
• cp -r dir /tmp — копирует папку dir и все её содержимое в папку /tmp.
• cp file1.txt file2.txt /tmp — копирует файлы file1.txt и file2.txt в папку /tmp.

mv

mv — команда для перемещения и переименования файлов и папок.

Примеры:

• mv file.txt /tmp — перемещает файл file.txt в папку /tmp.
• mv dir /tmp — перемещает папку dir в папку /tmp.
• mv file1.txt file2.txt — переименовывает файл file1.txt в file2.txt.

rm

rm — команда для удаления файлов и папок. Возможно рекурсивное удаление папок (-r) и принудительное удаление файлов без запроса подтверждения (-f).

Примеры:

• rm file.txt — удаляет файл file.txt.
• rm -r dir — рекурсивно удаляет папку dir и всё её содержимое.
• rm -f file.txt — удаляет файл file.txt без подтверждения.

Важно: команда rm не имеет возможности восстановления удаленных файлов или папок. После удаления файла или папки с помощью команды rm он исчезает навсегда.

grep

grep — поиск в файлах и потоках. Команда имеет опции для рекурсивного поиска (-r), игнорирования регистра (-i) и печати контекста результатов поиска (-C).

Примеры:

• grep "pattern" file.txt — ищет в файле file.txt строки, содержащие строку pattern.
• grep -r "pattern" dir — рекурсивно ищет в папку dir и всем её содержимом строки, содержащие строку pattern.
• cat file.txt | grep "pattern" — ищет в выводе команды cat (которая отображает содержимое file.txt) строки, содержащие строку pattern.

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

find

Поиск файлов и папок по многим критериям, таким как имя, тип, размер и время модификации.

Примеры:

• find . -name "pattern" — ищет в текущей папке и всех подпапках файлы и каталоги с именами, соответствующими шаблону pattern.
• find / -type f -size +100M — поиск во всей файловой системе файлов размером более 100 мегабайт.
• find / -mtime +30 — поиск во всей файловой системе файлов, которые не были изменены за последние 30 дней.

Команда find может быть медленной при поиске в больших каталогах или файловых системах, поскольку ей приходится обходить всё дерево файлов. Она также не имеет возможности искать шаблоны в содержимом файлов, для этого лучше использовать grep.

ssh

Подключение к удаленной машине с помощью протокола Secure Shell (SSH).

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

Примеры:

• ssh user@host — подключается к удалённой машине на host как пользователь user.
• ssh -p 2222 user@host — подключается к удалённой машине на host через порт 2222 как пользователь user.
• ssh -L 8000:localhost:80 user@host — подключается к удаленной машине на host как пользователь user и перенаправляет трафик с локального порта 8000 на порт 80 удаленной машины.

Это далеко не все команды для терминала, но зная эти восемь вам будет гораздо проще освоиться и начать работу. Удачи в обучении!

Другие статьи о терминале

• Полезные команды в cmd на windows
• Как сделать красивую консоль в Windows, Mac OS и Linux
• Работа с Git через консоль

Webpack — инструмент для сборки проекта перед деплоем, то есть загрузкой на хостинг.

Что понимается под сборкой? Представьте, что вы работаете над проектом, в котором 50 CSS и JavaScript-файлов. Если вы их вручную подключите в HTML с помощью тегов <link> и <script>, то потратите немало времени. Вёрстка разрастётся, документ станет тяжёлым, и с ним будет сложно работать.

Webpack автоматизирует эту работу — он разбивает файлы на пакеты и подключает на страницы, а мы с его помощью собираем проект. Ещё он помогает оптимизировать приложение: сжимает картинки, шрифты и видео, минимизирует код — но для этого нужно установить дополнительные npm-пакеты. Также с помощью сборщика настраивается локальный сервер и запускаются приложения в браузере без заливки на хостинг.

Есть и другие сборщики: rollup, esbuild, vite или parsel. Но, как показывает статистика npm, они не такие популярные.

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

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

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

При работе в VS Code полезно иметь инструменты, упрощающие кодинг. Мы собрали популярные расширения, которые вам помогут. Надеюсь.

ESLint — это инструмент, помогающий анализировать написанный на JavaScript код, находить синтаксические ошибки и автоматически их исправлять, писать аккуратный код в едином стиле по определённым правилам.

Кроме редактора кода, терминала, браузера и гита веб-разработчики пользуются вагоном и маленькой тележкой маленьких инструментов, которые выполняют какую-то одну задачу, но могут пригодиться в ежедневной работе. Предлагаем вам нашу подборку — надеемся, что что-то пригодится, а по поводу чего-то вы и вовсе скажете «А что, так можно было?».

Дисклеймер: подборка нисколько не претендует на полноту.