Пошаговое руководство по настройке

Пошаговое руководство по настройке сборщика Webpack 5 для совместной работы с такими инструментами как Pug, Sass, JavaScript, React и Markdown.

Содержание

• О чем статья

• Быстрый запуск webpack

• Установка и настройка html-webpack-plugin

• Установка и настройка DevServer

• Настройка в Webpack точки входа и выхода

• Автоматическая очистка каталогов

• Настройка режима production в webpack

• Babel

• Подключение шаблонизатора Pug

• Загрузка стилей

• Загрузка изображений

• Оптимизация изображений

• Включение синтаксиса Markdown и файлов .md в Pug

• Подключение шрифтов

• Копирование файлов и каталогов

• Установка и настройка React

• Полезные ресурсы для настройки webpack

• Заключение

О чем статья

Перед вами подробная инструкция по настройке сборщика Webpack 5 с нуля. Шаг за шагом статья объясняет «что делать» и «зачем это надо».

После выполнения всех шагов вы получите рабочий шаблон, в котором будут настроены Pug, Sass, JavaScript, React и Markdown.

• Шаблонизатор Pug обладает более широкими возможностями для написания разметки, чем HTML. Разметка Pug преобразуется вебпаком в разметку HTML.

• Препроцессор Sass имеет больше возможностей для написания стилей, чем CSS. В конечном итоге, вебпак преобразует код SCSS в CSS.

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

• React — это JavaScript-библиотека для создания пользовательских интерфейсов

• Разметка Markdown удобна для написания текстов. Разметка Markdown преобразуется в понятный для браузеров HTML.

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

Быстрый запуск Webpack

Для настройки сборки webpack автор статьи использовал операционную систему Ubuntu 20.04, в которой были установлены:

Следующие инструменты

Чтобы выполнять дальнейшие действия, на вашем компьютере должен быть установлен Node.js.

Откроем терминал и создадим каталог будущего проекта:

mkdir my-project

Сделаем этот каталог рабочим:

cd my-project

Обратите внимание! С этого момента старайтесь не закрывать окно терминала, так как в нем открыт рабочий каталог my-project и все дальнейшие команды в терминале выполняются в корневом каталоге проекта. Если терминал по какой-то причине будет закрыт, то нужно открыть новый терминал и выполнить команду: cd my-project.

Теперь, если нужна система контроля версий Git, выполним следующее. Сначала инициализируем Git, для этого в терминале введем:

git init

В корне проекта будет создан скрытый каталог .git, в котором хранятся необходимые файлы git-репозитория. Если в менеджере файлов каталог .git не отображается, то нажмем комбинацию клавиш Ctrl+H.

Затем, в корне проекта создадим скрытый файл .gitignore. Для этого, в терминале введем следующее:

touch .gitignore

В этом файле будем указывать имена и шаблоны для файлов и каталогов, которые не нужны в репозитории. С помощью редактора кода откроем файл .gitignore и запишем следующее:

node_modules

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

Не забывайте сохранять в редакторе кода всё, что изменили. Это забывают делать не только новички, но опытные разработчики. Поэтому, если после очередной правки кода, у вас что-то не работает, обязательно убедитесь, что код сохранен. В дальнейшем, я не буду напоминать об этом. Запомни правило: сделал правку в коде, нажми сочетание клавиш Ctrl+S. Эта комбинация клавиш сохраняет изменения и работает практически в любом редакторе.

С настройками Git в этом проекте закончим. В дальнейшем, не забываем делать коммиты.

Теперь, инициализируем npm, для этого в терминале введем следующую команду:

npm init -y

В корне проекта создается файл package.json с настройками по умолчанию, на что указывает опция -y. Подробно о файле package.json читайте в документации по npm.

Теперь установим webpack и webpack-cli, последний нужен для запуска webpack из командной строки. В терминале введем следующее:

npm i -D webpack webpack-cli

i — это сокращение от install. Опция -D указывает, что установленные пакеты нужны только для режима development (режима разработки) и не будут использоваться в производственной сборке. После установки это фиксируется в фале package.json, пакеты будут прописаны в секции "devDependencies": {...} .

Так как это первые пакеты, которые были установлены в проект, то будут созданы каталог node_modules и файл package-lock.json. Каталог node_modules содержит все устанавливаемые пакеты и их зависимости. Этот каталог не рекомендуется включать в репозиторий, поэтому мы указали это в файле .gitignore. Файл package-lock.json хранит записи о точных версиях установленных зависимостей.

Теперь в корне проекта создадим каталог src, в котором будет хранится исходный код:

mkdir src

В каталоге src создадим файл index.js:

touch src/index.js

В редакторе откроем файл src/index.js и введем следующий код:

function component(text) {
  const element = document.createElement('h1');
  element.textContent = text;
  return element;
}

document.body.prepend(component('Проект собран на Webpack'));

Затем в редакторе откроем package.json и добавим в поле "scripts" следующую строку с именем dev:

"scripts": {
  "dev": "webpack --mode development",
  "test": "echo "Error: no test specified" && exit 1"
}

dev — это произвольное сокращенное имя для скрипта webpack --mode development. Подобные скрипты в секции "scripts" файла package.json запускаются в с помощью команды npm run. Так, для запуска скрипта с именем dev, введем в терминале следующую команду:

npm run dev

В результате, в корне проекта должен появиться каталог dist, в который скомпилируется файл main.js. Если сравнить содержимое файла main.js с исходным src/index.js, то увидим отличия, хотя файлы выполняют одно и то же. Итак, мы запустили webpack в режиме разработки, в результате, файл src/index.js был транспилирован в файл dist/main.js.

Перед началом выполнения, webpack будет искать в корне проекта файл настроек webpack.config.js. Так как, файл мы ещё не создали, то webpack применяет настройки по умолчанию.  Он определяет точку входа src/index.js и выводит откомпилированный код в файл dist/main.js. Подробно об изменении настроек смотри ниже в параграфе Настройка в webpack точки входа и выхода.

Чтобы понять некоторые моменты, создадим в выходном каталоге файл dist/index.html. Для этого, в терминале выполним:

touch dist/index.html

Именно этот файл браузер начинает загружать первым, а потом загружает те ресурсы, которые прописаны в этом файле. В редакторе кода откроем файл dist/index.html и запишем следующее:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Быстрый запуск Webpack</title>
  </head>
  <body>
    <p>Файл создан вручную</p>
    <script src="main.js"></script>
  </body>
</html>

В этом файле мы указали ссылку на скрипт. Этот скрипт должен быть загружен и выполнен во время выполнения файла dist/index.html. В браузере откроем файл dist/index.html и увидим следующее:

Проект собран на Webpack 
Файл создан вручную

Первая строка текста создана файлом dist/main.js, а вторая — файлом dist/index.html.

На данный момент, файловая структура нашего проекта должна выглядеть так:

my-project
  |-dist
    index.html
    main.js
  |+node_modules
  |-src
    index.js
  |+.git
  package-lock.json
  package.json
  .gitignore

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

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

npm i -D html-webpack-plugin

Теперь настроим html-webpack-plugin в файле webpack.config.js. Но сначала создадим этот файл в корне проекта. Для этого в терминале выполним:

touch webpack.config.js

Затем откроем файл webpack.config.js в редакторе и напишем следующий код:

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'template.html'),
      filename: 'index.html',
    }),
  ],
};

Разберемся в коде:

• Первые две строки импортируют модули html-webpack-plugin и path и определяют эти модули в переменные HtmlWebpackPlugin и path соответственно.

• module.exports = {} — эта запись означает, что все настройки этого файла помещаются в объект, который экспортируется как модуль по умолчанию.

• Для плагина html-webpack-plugin создается экземпляр new HtmlWebpackPlugin с двумя заданными свойствами: template — путь к входному файлу и filename — имя выходного файла.

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

В Linux и macOS пути в файловой системе задаются так: /path/to/template.html. В Windows пути выглядят иначе: C:pathtotemplate.html. В среде Node.js существует модуль path, который учитывает эти различия. Модуль path мы подключили во второй строке файла webpack.config.js, а затем вызвали в свойстве template. Метод path.join объединяет заданные сегменты пути вместе и применяет необходимый разделитель для конкретной системы. Сегменты пути для метода path.join мы задали тремя аргументами __dirname, 'src' и 'template.html'. Если заранее известно, что этот шаблон будет использоваться только в ОС Linux, то можно вместо такого кода, как template: path.join(__dirname, 'src', 'template.html') указать проще — template: './src/template.html'

• __dirname — глобальная константа, которая указывает абсолютный путь к каталогу файла, код которого запрашивает эту константу, т. е. в нашем случае, файл, который запрашивает __dirname — это файл webpack.config.js, поэтому __dirname содержит абсолютный путь к корневому каталогу проекта.

Вместо метода path.join часто применяют метод path.resolve.

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

"scripts": {
  "serve": "webpack serve --open --mode development --config dev/serve.config.js"
}

Однако, мы это вносить в файл не будем.

Создадим файл src/template.html:

touch src/template.html

Откроем в редакторе файл src/template.html и создадим в нём такую разметку:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Быстрый запуск Webpack</title>
  </head>
  <body>
    <p>Файл создан плагином html-webpack-plugin</p>
  </body>
</html>

Теперь, удалим каталог dist с двумя файлами, а после в терминале запустим команду:

npm run dev

Каталог dist снова будет создан, а внутри него созданы файлы index.html и main.js. Если откроем в браузере файл dist/index.html, то увидим:

Проект собран на Webpack
Файл создан плагином html-webpack-plugin

Таким образом, webpack с помощью плагина html-webpack-plugin сделал две вещи:

• создал файл dist/index.html из файла src/template.html

• в файле dist/index.html автоматически прописал путь к файлу скрипта main.js.

Минимально возможный вариант сборки webpack собран и настроен. С помощью этого шаблона можно начинать разработку проекта по следующему алгоритму:

1. Редактируем исходный код в файлах каталога src

2. Сохраняем результат

3. Выполняем сборку проекта с помощью команды:

npm run dev

1. Открываем в браузере файл dist/index.html, либо если этот файл открыт, перезагружаем страницу браузера.

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

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

В созданной сборке нужно каждый раз запускать в терминале команду npm run dev и вручную обновлять страницу браузера. Для уменьшения количества рутинных операций, автоматизируем процесс.

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

1. Режим Watch

2. webpack-dev-server

3. webpack-dev-middleware

Здесь мы рассмотрим вариант с веб сервером. С помощью терминала установим webpack-dev-server:

npm i -D webpack-dev-server

В редакторе кода откроем файл webpack.config.js и добавим настройки для веб-сервера, отмеченные знаком +:

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

  module.exports = {
    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(__dirname, 'src', 'template.html'),
        filename: 'index.html',
      }),
    ],
+   devServer: {
+     watchFiles: path.join(__dirname, 'src'),
+     port: 9000,
+   },
  };

Для devServer указали два свойства:

• watchFiles указывает на каталог src, за которыми будет вестись наблюдение и в случае, если в каталоге произойдут изменения, веб сервер автоматически сделает сборку проекта и перезагрузит страницу браузера.

• port указывает порт на котором будет работать веб-сервер, по умолчанию — localhost:8080.

Чтобы запускать веб сервер короткой командой, создадим для CLI скрипт «serve» в файле package.json:

{
  "scripts": {
+   "serve": "webpack serve --open --mode development",
    "dev": "webpack --mode development",
    "test": "echo "Error: no test specified" && exit 1"
  }
}

• serve означает запустить веб сервер.

• --open автоматически запускает браузер, который в системе установлен по умолчанию.

• --mode development включает режим разработки.

Перед тем как запустить веб-сервер, удалим каталог dist. Это делать необязательно, а нужно лишь для понимания работы веб-сервера.

В терминале запустим веб-сервер командой:

npm run serve

В результате, автоматически откроется страница браузера по адресу http://localhost:9000/ и мы увидим те же строки, что и при ручном запуске браузера:

Проект собран на Webpack
Файл создан плагином html-webpack-plugin

Если по какой-то причине, страница браузера автоматически не откроется, то откройте браузер вручную и перейдите по адресу http://localhost:9000.

Если заглянуть в каталог проекта, когда сервер работает, то мы не увидим каталог dist. Тогда откуда браузер берет данные? Всё просто, DevServer компилирует исходный код, и записывает файлы не на диск, а в оперативную память.

Веб-сервер можно остановить, если в терминале нажать сочетание клавиш Ctrl+C.

Теперь файловая структура нашего проекта будет выглядеть так:

my-project
  |-node_modules
  |-src
    index.js
    template.html
  |+.git
  package-lock.json
  package.json
  webpack.config.js
  .gitignore

Настройка в Webpack точки входа и выхода

В Webpack’е начиная с четвертой версии не требуется задавать точки входа и выхода, а допускается использовать настройки по умолчанию:

• точка входа — ./src/index.js

• точка выхода — ./dist/main.js.

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

Точка входа — файл, который Webpack компилирует первым и если в этом файле подключаются зависимости, то эти зависимости тоже обрабатываются.

С помощью настроек, укажем путь и имя точки входа. Для этого в файл webpack.config.js добавим свойство entry:

module.exports = {
  entry: path.join(__dirname, 'src', 'index.js'),
};

Теперь, чтобы изменить точку входа изменяем значение свойства entry. Также, можно задать несколько точек входа. Это нужно при разделении кода на части. Подробно о настройках точки входа читайте в статьях Entry Points и Entry and Context.

Точка выхода — каталог, в который Webpack компилирует точки входа.

Точка выхода настраивается в файле webpack.config.js с помощью свойства output:

module.exports = {
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.[contenthash].js',
  },
};

где:

• [contenthash] — шаблон, в который подставляется хеш, сгенерированный на основе содержимого файла. Хеширование меняет имя после каждого изменения содержимого файла. Это решает проблему версионирования. Если хеш изменился, то браузер берет не старый файл из кеша, а загружает измененный с сервера. Можно сократить 40 знаков хеша до нужного количества символов следующим образом: [contenthash:8]. Хеш будет длиной 8 символов. Подробно о шаблоне хешей читайте в статье Hash vs chunkhash vs ContentHash.

Более подробно о точках выхода описывается в статьях concepts/output и configuration/output.

Теперь файл webpack.config.js выглядит так:

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

module.exports = {
  entry: path.join(__dirname, 'src', 'index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.[contenthash].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'template.html'),
      filename: 'index.html',
    }),
  ],
  devServer: {
    watchFiles: path.join(__dirname, 'src'),
    port: 9000,
  },
};

В терминале остановим сервер клавишами Ctrl+C и запустим следующую команду:

npm run dev

В корне проекта появится каталог dist, в котором будут два файла: index.html и index.[hash].js. Второй файл раньше назывался main.js. Код в имени файла — это и есть хеш, который будет меняться с изменением содержимого файла.

Автоматическая очистка каталогов

Webpack будет создавать новые файлы с хешированными именами при каждом запуске сборки, а старые остаются в каталоге. Чтобы ненужные файлы не накапливались, перед каждым запуском вебпака необходимо очищать каталог dist. В этом нам поможет filemanager-webpack-plugin.

Сперва, установим его:

npm i -D filemanager-webpack-plugin

Затем, в файле webpack.config.js добавим:

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const path = require('path');
+ const FileManagerPlugin = require('filemanager-webpack-plugin');

  module.exports = {
    ...
    plugins: [
      new HtmlWebpackPlugin({
        ...
      }),
+     new FileManagerPlugin({
+       events: {
+         onStart: {
+           delete: ['dist'],
+         },
+       },
+     }),
    ],
    devServer: {
      ...
    },
  };

Каталог dist, если быть точным, не очищается, а полностью удаляется. Плагин filemanager-webpack-plugin может также копировать, создавать, перемещать, архивировать файлы и каталоги перед началом сборки onStart и по окончании onEnd. В дальнейшем, мы воспользуемся этим плагином для копирования файлов.

Проверим работу пакета filemanager-webpack-plugin, для этого в терминале запустим веб-сервер командой:

npm run serve

В результате, автоматически откроется страница браузера по адресу http://localhost:9000/ и мы увидим тоже, что и в прошлый раз:

Проект собран на Webpack
Файл создан плагином html-webpack-plugin

Если же проверим корневой каталог проекта, то не увидим каталога dist, что говорит, о правильной работе пакета filemanager-webpack-plugin.

Остановим DevServer, для этого в терминале нажмем Ctrl+C.

Настройка режима production в webpack

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

В файле package.json добавим скрипт "build":

  "scripts": {
    "serve": "webpack serve --open --mode development",
    "dev": "webpack --mode development",
+   "build": "webpack --mode production",
    "test": "echo "Error: no test specified" && exit 1"
  },

Чтобы понять, чем сборка production отличается от development, проделаем некоторые шаги. Запустим webpack в режиме development:

npm run dev

Откроем файл dist/index.[hash].js в редакторе и посмотрим на код. Видим кучу комментариев, а код находится не в сжатом виде. Размер файла составляет 1418 байт.

Запустим webpack в режиме production:

npm run build

Посмотрим на содержимое файла dist/index.[hash].js, в котором увидим, что отсутствуют комментарии, а код имеет сжатый вид. Размер файла составляет 139 байт. Разница по сравнению с production в 10 раз. Этим режим production отличается от режима development — код конечного бандла сжимается. То же относится и к файлу index.html, который в режиме development имеет размер 282 байта, а в режиме production размер уменьшается до 259 байт, так как убираются пробелы и ненужные символы.

Babel

Большинство новых браузеров поддерживают все новые возможности JavaScript ES6-ES13. Но, многие из этих возможностей не поддерживаются старыми браузерами, которые до сих пор используются в мире. Поэтому, если важно сохранять поддержку этих браузеров, то самый распространенный способ — применить Babel.

Babel — это компилятор, который адаптирует новые функции JavaScript для устаревших браузеров.

Чтобы посмотреть, какие браузеры поддерживают ту или иную функцию воспользуемся сервисом Can I use. Если в строке Can I use______? ввести es13, то будет выведен список функций, которые ожидаются в 13-ом выпуске ECMAScript. При выборе функции, показывается таблица с браузерами, которые поддерживают или не поддерживают эту функцию.

Babel позволяет писать код с использованием новых возможностей JavaScript ES6-ES13. При этом можно не заботится о том, что функция не будет поддерживаться старым браузером. Babel транспилирует JavaScript код в ES5, а браузеры, которые не поддерживают этот стандарт уже никем не используются.

Для работы Babel требуется два пакета @babel/core и @babel/preset-env, а чтобы Babel работал с Webpack, требуется загрузчик babel-loader. Установим эти три пакета одной командой:

npm i -D @babel/core @babel/preset-env babel-loader

Конфигурацию для Babel зададим в файле .babelrc. Из терминала создадим этот файл:

touch .babelrc

В корне проекта будет создан файл .babelrc. Откроем его в редакторе и внесем следующий код:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ]
}

Теперь, откроем файл webpack.config.js и добавим настройки для Babel:

  module.exports = {
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
      ...
    },
+   module: {
+     rules: [
+       {
+         test: /.js$/,
+         use: 'babel-loader',
+         exclude: /node_modules/,
+       },
+     ],
+   },
    plugins: [
      ...
    ],
    devServer: {
      ...
    },
  };

Мы создали объект module, для которого задали правило rules. Для вебпака любой файл — это модуль, будь то скрипт, стили, шрифт или изображение. Здесь, для всех модулей (читай, файлов) с расширением .js webpack будет применять плагин babel-loader. Правило не действует на каталог node_modules, что указывается в свойстве module.rules.exclude.

Перед тем, как запустить сборку, откроем файл dist/index.[hash].js и посмотрим на код, который выглядит примерно так:

document.body.append((function(e){constt=document.createElement('h1');return (t.textContent='Проект собран на Webpack'),t;})());

В терминале запустим команду:

npm run build

Теперь, откроем файл dist/index.[hash].js и посмотрим на код. Этот код выглядит по-другому:

(()=>{var e;document.body.append(("Проект собран на Webpack",(e=document.createElement("h1")).textContent="Проект собран на Webpack",e))})();

Исходный код мы не меняли, но код конечного бандла изменился. Это результат действия компилятора Babel. Второй код поймут все браузеры, которые поддерживают ES5 и выше.

Подключение шаблонизатора Pug

На чистом HTML верстать можно, но трудно поддерживать большие проекты. Поэтому, умные люди придумали инструменты, которые называются шаблонизаторами.

Шаблонизаторы позволяют:

• Создавать шаблоны, компоненты, блоки.

• Работать с данными, подставляя эти данные в код. Например, шаблонизатор может автоматически создать любое количество карточек товара, если подставить данные в компонент из объекта JSON, тогда как в HTML это нужно делать вручную.

• Менять классы элементов в зависимости от данных, что позволяет управлять интерфейсом компонентов.

• Задавать условные выражения и циклы, как в языках программирования.

В этой статье рассмотрим шаблонизатор Pug, который написан на JavaScript и выполняется в среде Node.js. Шаблонизатор Pug использует синтаксис, основанный на отступах и отличается от синтаксиса HTML отсутствием угловых скобок и закрывающихся тегов. После компиляции синтаксис Pug превращается в HTML код.

Чтобы шаблонизатор Pug работал с Webpack, имеется плагин и загрузчик файлов pug-loader.

Загрузчик pug-loader не поддерживает Pug 3-ей версии, поэтому придется довольствоваться второй версией. Кому очень нужен Pug 3, предлагаю два варианта решения:

Сравнительно недавно появился pug-plugin, который работает с Webpack 5 и Pug 3.

Можно самостоятельно настроить pug-loader для третьей версии Pug и пользоваться этим способом, пока разработчики плагина выпустят новое обновление. Это способ, которым пользуется автор этой статьи, об этом способе читайте в статье  Как заставить работать вместе Pug 3, pug-loader и Webpack 5.

Установим pug и pug-loader

npm i -D pug pug-loader

Вебпаку укажем, что используем плагин pug-loader для файлов с расширением .pug. Для этого в файле webpack.config.js добавим:

  module.exports = {
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
      ...
    },
    module: {
      rules: [
        {
          test: /.js$/,
          use: 'babel-loader',
          exclude: /node_modules/,
        },
+       {
+          test: /.pug$/,
+          loader: 'pug-loader',
+       },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
+       template: path.join(__dirname, 'src', 'template.pug'),
        filename: 'index.html',
      }),
      new FileManagerPlugin({
        ...
      }),
    ],
    devServer: {
      ...
    },
  };

Теперь, благодаря pug-loader экземпляр плагина HtmlWebpackPlugin может работать с файлами .pug.

Из терминала создадим файл src/template.pug:

touch src/template.pug

Откроем файл в редакторе и напишем в нем следующее:

doctype html
html(lang= 'ru')
  head
    meta(charset='utf-8')
    title= 'Быстрый запуск Webpack'
  body
    p Файл откомпилирован шаблонизатором Pug

Обязательно соблюдайте начальные отступы для тегов. Каждый отступ означает вложенность тега в вышестоящий тег.

Теперь удалим файл src/template.html и в терминале запустим команду:

npm run serve

Откроется страница браузера по адресу http://localhost:9000/, на которой увидим:

Проект собран на Webpack
Файл откомпилирован шаблонизатором Pug

Из этого следует, что шаблонизатор Pug работает правильно. Остановим DevServer, для этого в терминале нажмем Ctrl+C.

Загрузка стилей в webpack

Для написания стилей будем использовать препроцессор Sass, который расширяет возможности CSS и упрощает создание CSS-кода, а также преобразует SCSS в понятный браузеру код CSS. Однако, не весь современный код CSS распознают устаревшие браузеры. Поэтому, будем дополнительно обрабатывать этот CSS с помощью плагина postcss-preset-env, чтобы большинство браузеров понимало современные стили.

Установим необходимые пакеты:

npm i -D sass-loader postcss-loader postcss-preset-env css-loader style-loader sass

где:

• sass-loader — загрузчик файлов Sass/SCSS

• sass компилятор файлов .scss в .css.

• postcss-loader — загрузчик CSS файлов для пост-обработки. Должен работать с каким нибудь плагином.

• postcss-preset-env — плагин для PostCSS, который конвертирует современный CSS в код, понятный большинству браузеров, включением необходимых полифилов.

• css-loader загрузчик CSS-файлов

• style-loader загрузчик стилей в DOM

Если требуется использовать только CSS и не пользоваться преимуществами SCSS и PostCSS, то установите только css-loader и style-loader.

Создадим файл src/main.scss:

touch src/main.scss

и внесем в него следующее:

$font-size: 1rem;
$font-color: lch(28 99 35);

html {
  font-size: $font-size;
  color: $font-color;
}

В файле используются переменные Sass и LCH цвета, которые поддерживаются не всеми браузерами, но PostCSS транспилирует эти цвета в понятные любому браузеру.

В файле src/index.js сделаем импорт файла main.scss:

import './main.scss';

Такой импорт стилей в скрипте не поддерживается языком JavaScript, а возможен благодаря webpack.

В webpack.config.js настроим пакеты:

...
  module.exports = {
    entry: ... ,
    output: {
      ...
    },
    module: {
      rules: [
        {
          ...
        },
        {
          test: /.pug$/,
          loader: 'pug-loader',
        },
+       {
+         test: /.(scss|css)$/,
+         use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+       },
      ],
    },
    plugins: [
      ...
    ],
    devServer: {
      ...
    },
  };

Указываем вебпаку, какие загрузчики стилей применять. Причем, порядок их перечисления в массиве свойства use важен, так как загрузчики используются вебпаком от последнего к первому:

• Так что, последним в списке должен быть sass-loader, который загружает файлы SCSS и передает компилятору sass, а этот компилирует код в CSS.

• Затем идет postcss-loader, который загружает CSS для PostCSS, а этот, применяя плагины, транспилирует самые современные фичи CSS (переменные, миксины и многое другое) в то, что понятно большинству браузеров. Также, PostCSS применяет автопрефиксер и линтер к CSS.

• Следующим идет css-loader, который интерпретирует @import и url() внутри CSS.

• Последним будет style-loader, который внедряет CSS в DOM.

Настройки для PostCSS можно задать как в файле webpack.config.js, так и в собственном файле настроек postcss.config.js. Воспользуемся вторым способом.

Создадим в корне проекта файл postcss.config.js

touch postcss.config.js

и запишем в файле следующий код:

module.exports = {
  plugins: {
    'postcss-preset-env': {
      browsers: 'last 2 versions',
    },
  },
};

В терминале запустим команду:

npm run serve

Откроется браузер и появится цветной текст.

Проект собран на Webpack
Файл откомпилирован шаблонизатором Pug

Теперь остановим сервер сочетанием клавиш Ctrl+C и введем в терминале команду:

npm run build

Если заглянем в каталог dist, то не обнаружим файла с расширением .css. Это связано с тем, что стили находятся в бандле dist/index.[hash].js.

Мы можем извлечь стили в отдельный файл, что позволит браузеру раздельно кэшировать JS и CSS, и если будут внесены изменения в файл CSS, то для обновления браузеру не нужно будет загружать весь бандл, а загрузится лишь обновленный файл CSS. Это положительно сказывается на скорости загрузки страниц браузером.

Чтобы сборщик мог извлекать CSS из файлов .js установим и настроим плагин mini-css-extract-plugin. Начнем с установки:

npm i -D mini-css-extract-plugin

Затем настроим плагин в файле webpack.config.js:

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const path = require('path');
  const FileManagerPlugin = require('filemanager-webpack-plugin');
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');

  module.exports = {
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
      ...
    },
    module: {
      rules: [
        ... ,
        {
          test: /.(scss|css)$/,
          use: [
+           MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
            'sass-loader',
          ],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        ...
      }),
      new FileManagerPlugin({
        ...
      }),
+     new MiniCssExtractPlugin({
+       filename: '[name].[contenthash].css',
+     }),
    ],
    devServer: {
      ...
    },
  };

Вместо 'style-loader' используем MiniCssExtractPlugin.loader.

Проверим работу плагина, для этого в терминале запустим:

npm run build

В каталоге dist появится файл main.[hash].css.

Загрузка изображений в webpack

Теперь настроим webpack для работы с изображениями в формате PNG, JPG, GIF и SVG. До webpack 5 для работы с изображениями использовались загрузчики raw-loader, url-loader и file-loader. Начиная с webpack 5, вместо загрузчиков изображений, значков, шрифтов и т. д. используется встроенный Asset Modules.

Для поддержки изображений устанавливать ничего не нужно, требуется только настроить webpack.config.js:

  module.exports = {
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'index.[contenthash].js',
+     assetModuleFilename: path.join('images', '[name].[contenthash][ext]'),
    },
    module: {
      rules: [
        ...
        {
          test: /.(scss|css)$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
        },
+       {
+         test: /.(png|jpg|jpeg|gif)$/i,
+         type: 'asset/resource',
+       },
+       {
+         test: /.svg$/,
+         type: 'asset/resource',
+         generator: {
+           filename: path.join('icons', '[name].[contenthash][ext]'),
+         },
+       },
      ],
    },
    plugins: [
      ...
    ],
    devServer: {
      ...
    },
  };

• assetModuleFilename — указывает выходной каталог с именем images  для обработанных изображений и шаблон имени [name].[contenthash][ext] для файлов, которые соответствуют правилу type: 'asset/resource'. Если assetModuleFilename не указан, то, по умолчанию, каталогом будет dist, а имена файлов будут задаваться по шаблону [contenthash][ext].

• [ext] — шаблон для расширения файла, также, включает точку.

• generator.filename — переопределяет assetModuleFilename для конкретного asset-правила. Здесь, svg-файлы будут выводиться в каталог dist/icons

• type имеет четыре типа asset:

  • asset/resource — работает так же, как и загрузчик file-loader. Модули, которые соответствуют правилу type: 'asset/resource' будут выводится в указанный с помощью assetModuleFilename каталог.

  • asset/inline работает как загрузчик url-loader. Модули, соответствующие правилу type: 'asset/inline', встраиваются в код бандла как Data URL.

  • asset/source похож на работу загрузчика raw-loader. Модули, соответствующие правилу type: 'asset/source', встраиваются без преобразований (как есть).

  • asset объединяет asset/resource и asset/inline. Он работает следующим образом: если размер модуля больше 8 КБ, то он работает как asset/resource, в противном случае — как asset/inline. Размер 8 КБ задан по умолчанию, но его можно изменить с помощью свойства parser.dataUrlCondition.maxSize.

Создадим каталог src/images и поместим в него растровое изображения с именем image.png и векторное — logo.svg.

Могу предложить свои рисунки. Перейдем по этой ссылке, наведем курсор на рисунок, нажмем правую кнопку мыши, выберем из контекстного меню «Сохранить изображение как…», выберем каталог src/images нашего проекта, нажмем кнопку сохранить. Тоже самое проделаем для векторного изображения.

Откроем файл src/template.pug и создадим два div контейнера с классами .logo-png и .logo-svg, а в контейнеры поместим изображения с тегами img:

doctype html
html(lang= 'ru')
  head
    meta(charset='utf-8')
    title= 'Быстрый запуск Webpack'
  body
    p Файл откомпилирован шаблонизатором Pug
    .logo-png
      img.logo1(src=require('./images/image.png') alt='Загрузка PNG изображений с помощью Webpack')
    .logo-svg
      img.logo2(src=require('./images/logo.svg'), alt='Загрузка SVG изображений с помощью Webpack')

В атрибуте src используется require, т. е. изображение запрашивается как модуль.

В терминале запустим команду:

npm run serve

В окне браузера должен появится текст, а под ним два рисунка:

Изменим размеры изображений через стили, для этого добавим в конец файла src/main.scss следующее:

.logo1 {
  width: 10em;
}
.logo2 {
  width: 10em;
}

Сохраним изменения и увидим, что размер изображений стал одинаковым. При этом, мы изменили только ширину, а высота изменилась пропорционально.

Оптимизация изображений

Многие изображения сжимаются без ухудшения визуального качества. Сжатие дает браузеру выигрыш в скорости загрузки. Для этого существуют инструменты оптимизации изображений.

Векторные изображения, к которым относится формат SVG, можно неограниченно масштабировать без потери качества. SVG — текстовый язык разметки, а SVG-файлы редактируются при помощи текстовых или векторных графических редакторов. Если в SVG изображении не сильно много мелких деталей, то SVG-файлы получаются меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF. SVG применяется во фронтенде и для него придумано много инструментов. Одним из таких инструментов является svgo — минификатор, который удаляет лишний код в разметке SVG и тем самым уменьшает размер файла.

Установим svgo:

npm i -D svgo

Теперь, чтобы заработало сжатие для SVG файлов, настроим плагин imagemin-svgo для совместной работы svgo и imagemin. Однако, у нас не установлен imagemin.

Минификатор imagemin применяется для оптимизации растровых изображений. Для webpack существует image-minimizer-webpack-plugin — это загрузчик и плагин для совместной работы imagemin и webpack.

Сначала, установим плагин image-minimizer-webpack-plugin и минификатор imagemin:

npm i -D image-minimizer-webpack-plugin imagemin

Работа imagemin зависит от окружающих его плагинов. Поэтому, для оптимизации изображений без потерь качества, установим следующие плагины для imagemin:

npm i -D imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo

В файл webpack.config.js добавим настройки:

  ...
+ const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

  module.exports = {
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
      ...
    },
    module: {
      rules: [
        ...
      ],
    },
    plugins: [
      ...
    ],
    devServer: {
      ...
    },
+   optimization: {
+     minimizer: [
+       new ImageMinimizerPlugin({
+         minimizer: {
+           implementation: ImageMinimizerPlugin.imageminMinify,
+           options: {
+             plugins: [
+               ['gifsicle', { interlaced: true }],
+               ['jpegtran', { progressive: true }],
+               ['optipng', { optimizationLevel: 5 }],
+               ['svgo', { name: 'preset-default' }],
+             ],
+           },
+         },
+       }),
+     ],
+   },
  };

Для svgo параметры оптимизации установлены по умолчанию { name: 'preset-default' }. Подробно о настройках оптимизации svgo читайте здесь. А чтобы более углубленно изучить настройки imagemin, читайте ImageMinimizerWebpackPlugin.

В терминале запустим команду:

npm run build

Сравним размеры файлов изображений в каталоге src и dist. Файл image.png был 4,9 КБ, а стал 2,3 КБ, файл logo.svg был 11,4 КБ, а стал 2,5 КБ. Мы видим, заметное сжатие изображений, притом, визуальное качество этих изображений никак не пострадало.

Включение синтаксиса Markdown и файлов .md в Pug

Pug является удобным инструментом для замены HTML при написании разметки. Но если необходимо в разметку вставлять большие объемы текста, например, как в статье, которую вы сейчас читаете, то ни Pug, ни HTML не удобны для этого. Для написания текстов придумали разметку Markdown, которая удобна для чтения и написания текстов, и которая в итоге будет преобразована в HTML.

Сравните текст, написанный на Markdown

## Markdown документ

- Написано на **Markdown**

с текстом, написанным на Pug:

h2 Markdown документ

ul
  li Написано на
    b Markdown

и с текстом, написанным на HTML:

<h2>Markdown документ</h2>

<ul>
  <li>Написано на <b>Markdown</b></li>
</ul>

По умолчанию шаблонизатор Pug понимает только свою разметку и разметку HTML. Чтобы в шаблонизаторе Pug использовать Markdown, применим фильтр :markdown-it модуля jstransformer-markdown-it.

Фильтры позволяют использовать в шаблонизаторе Pug другие языки.

Установим модуль jstransformer-markdown-it:

npm i -D jstransformer-markdown-it

Теперь можем в Pug файле использовать синтаксис Markdown. Добавим в конец файла src/template.pug три строки кода:

doctype html
html(lang= 'ru')
  head
    meta(charset='utf-8')
    title= 'Быстрый запуск Webpack'
  body
    p Файл откомпилирован шаблонизатором Pug
    .logo-png
      img.logo1(src=require('./images/image.png') alt='Загрузка PNG изображений с помощью Webpack')
    .logo-svg
      img.logo2(src=require('./images/logo.svg'), alt='Загрузка SVG изображений с помощью Webpack')

    :markdown-it(linkify langPrefix='highlight-')
      ## Markdown документ

      - Написано на **Markdown**

Сохраним файл и в терминале выполним команду:

npm run serve

В браузере мы видим после изображений две строки текста, написанные с помощью Markdown. Это заголовок второго уровня и строка немаркированного списка со словом, которое выделено жирным шрифтом .

Чтобы не загрязнять код текстом, можно поместить markdown разметку в файл с расширением .md и включить этот файл в pug-шаблон, используя include:markdown-it, например, создадим в корне проекта каталог content, а в нём файл article.md. Для этого, либо остановим сервер комбинацией клавиш Ctrl+C и воспользуемся данным терминалом, либо, оставив сервер работать, откроем новое окно терминала, в котором введем:

mkdir content
touch content/article.md

Запишем в файл content/article.md следующее:

## Markdown документ

- Написано на **Markdown**

В файле src/template.pug заменим последние три строки на строку с include:markdown-it ../content/article.md:

doctype html
html(lang= 'ru')
  head
    meta(charset='utf-8')
    title= 'Быстрый запуск Webpack'
  body
    p Файл откомпилирован шаблонизатором Pug
    .logo-png
      img.logo1(src=require('./images/image.png') alt='Загрузка PNG изображений с помощью Webpack')
    .logo-svg
      img.logo2(src=require('./images/logo.svg'), alt='Загрузка SVG изображений с помощью Webpack')

    include:markdown-it ../content/article.md

Теперь код и текст будут в разных файлах.

Подключение шрифтов

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

Шрифты нашего проекта разместим в каталоге src/fonts, создадим этот каталог, а в нём файл fonts.scss:

mkdir src/fonts
touch src/fonts/fonts.scss

В этом файле будем хранить CSS стили для шрифтов. Импортируем файл fonts.scss в src/index.js:

  import './main.scss';
+ import './fonts/fonts.scss';

  function component(text) {
    const element = document.createElement('h1');
    element.textContent = text;
    return element;
  }

  document.body.prepend(component('Проект собран на Webpack'));

Теперь, скачаем нужные шрифты и код CSS для них.

1. На странице google-webfonts-helper в списке слева нужно выбрать необходимый шрифт.

• Справа от списка появится страница для шрифта. На этой странице можно дополнительно указать нужные кодировки и стили, которые планируется использовать в шрифте.

• В секции Select charsets выберем cyrillic и latin.

• В секции Select styles выберем regular, italic, 700 и 700italic

• В секции Copy CSS: в поле Customize folder prefix (optional): укажем префикс пути ./ и скопируем из серого поля CSS-код в наш файл src/fonts/fonts.scss.

1. Нажмем на синюю кнопку в секции Download files и скачаем файл с расширением .zip.

2. Распакуем из zip-архива файлы шрифтов в каталог src/fonts/.

Рекомендуется оптимизировать шрифты на таких сервисах как Font2web или Transfonter, но шрифты Google уже оптимизированы, поэтому этот шаг можно пропустить.

Для обработки шрифтов вебпаком добавим следующие правила в файл webpack.config.js:

  module: {
    rules: [
+     {
+       test: /.(woff2?|eot|ttf|otf)$/i,
+       type: 'asset/resource',
+     },
    ],
  },

В файле main.scss укажем на используемый шрифт. Так, если это будет шрифт Roboto и мы хотим его использовать по всему нашему проекту, то запишем:

html {
  font-family: 'Roboto';
}

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

npm run serve

Откроется браузер и мы увидим, что весь шрифт отображается без засечек.

Проверить применяемый шрифт для элемента можно с помощью инструментов разработчика. Чтобы быстро открыть инструменты разработчика в браузере, нажмем Ctrl+Shift+I, и включим режим выбора элементов сочетанием клавиш Ctrl+Shift+C. Если у вас браузер Chrome или Yandex, то наведите курсором на любой текст на странице. В контекстной подсказке будет показан применяемый шрифт:

Если у вас браузер Firefox, то на применяемые шрифты нужно смотреть в секции для CSS-кода Инспектора.

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

Часто, возникает необходимость скопировать в готовую сборку некоторые файлы или каталоги без каких-либо преобразований. Это могут быть файлы PDF, либо файл robots.txt, который используется для ограничения доступа поисковым роботам к некоторым ресурсам сайта, файлы favicon.ico, sitemap.xml и т.п. В исходном коде такие ресурсы, обычно, помещают в каталог static, а из него эти ресурсы копируют в корень каталога dist.

Создадим каталог src/static, а в нем файл robots.txt:

mkdir src/static
touch src/static/robots.txt

Как заполнять файл robots.txt можно узнать в статье Использование файла robots.txt, а пока оставим его пустым.

В параграфе Автоматическая очистка каталогов применялся плагин filemanager-webpack-plugin, который может удалять, копировать, создавать, перемещать и архивировать файлы и каталоги. Применим этот плагин для копирования фалов. Так как плагин в проекте уже установлен, то остается его настроить для копирования. Добавим в файл webpack.config.js следующий код:

* const FileManagerPlugin = require('filemanager-webpack-plugin');
module.exports = {
plugins: [
      ... ,
*     new FileManagerPlugin({
*       events: {
*         onStart: {
*           delete: ['dist'],
*         },
+         onEnd: {
+           copy: [
+             {
+               source: path.join('src', 'static'),
+               destination: 'dist',
+             },
+           ],
*         },
*       },
*     }),
      ... ,
    ],
  };

Звездочками * отмечены строки, которые для этого плагина были настроены раньше в параграфе Автоматическая очистка каталогов, а знаком + отмечены строки, которые добавлены сейчас.

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

npm run build

В каталоге dist появился файл robots.txt.

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

Установим react и react-dom в проект. Причем, они должны быть установлены как библиотеки. Для этого запустим установку без опции -D:

npm i react react-dom

В файле package.json эти зависимости должны появиться в секции «dependencies».

Так как в реакте мы будем писать код на JSX, то установим пресет @babel/preset-react:

npm i -D @babel/preset-react

@babel/preset-react — модуль, преобразующий JSX в JavaScript.

Откроем файл .babelrc и добавим строку @babel/preset-react таким образом:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    "@babel/preset-react"
  ]
}

В каталоге src создадим каталог components, а в нём файл app.js:

mkdir src/components
touch src/components/app.js

Запишем в файл app.js следующий код:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <>
        <h1 className="h1">Приложение на React</h1>
      </>
    );
  }
}

export default App;

Это отдельный компонент, который будет отображать заголовок.

Теперь создадим рендерер, который отобразит компонент App. Для этого добавим в файл index.js строки, отмеченные знаком +, а строки, отмеченные знаком - можно удалить, но мы их пока оставим:

+ import React from 'react';
+ import ReactDOM from 'react-dom';
+ import App from './components/app';

  import './main.scss';
  import './fonts/fonts.scss';

- function component(text) {
-   const element = document.createElement('h1');
-   element.textContent = text;
-   return element;
- }

- document.body.prepend(component('Проект собран на Webpack'));

+ ReactDOM.render(<App />, document.getElementById('root'));

В последней строке мы указали, куда React будет отрисовывать свои элементы. Это элемент div с id="root". Поэтому, создадим в файле template.pug такой элемент div:

doctype html
html(lang= 'ru')
  head
    meta(charset='utf-8')
    title= 'Быстрый запуск Webpack'
  body
    p Данный файл откомпилирован шаблонизатором Pug
    .logo-png
      img.logo1(src=require('./images/image.png') alt='Загрузка PNG изображений с помощью Webpack')
    .logo-svg
      img.logo2(src=require('./images/logo.svg'), alt='Загрузка SVG изображений с помощью Webpack')

    include:markdown-it content/article.md

    #root

Элемент #root мы поместили в конце файла, хотя можем поместить где угодно. Также мы можем создать несколько элементов с разными идентификаторами и разместить их в разных местах файла или файлов, но для каждого такого элемента нужно создавать отдельный ReactDOM.render.

Чтобы показать, что SCSS работает в React, откроем файл main.scss и добавим в конец следующий код:

.h1 {
  color: red;
}

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

npm run serve

Откроется окно браузера и мы увидим следующее:

Теперь мы можем разрабатывать приложения на React.

Полезные ресурсы для настройки webpack

Настройка Webpack заставляет постоянно редактировать файл webpack.config.js. Поэтому, полезно держать под рукой справочник. Официальный сайт Webpack’а предлагает такой справочник, который представляет файл конфигурации с интерактивными опциями, если нажать на название непонятной опции, откроется страница с подробной документацией.

Рекомендую посетить сервис createapp.dev, который поможет создать готовый шаблон проекта с необходимыми настройками. Этот сервис настраивает проект под Webpack, Parcel и Snowpack и полезен для опытных пользователей.

Заключение

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

Не рассмотрена такая тема, как разделение кода на чанки. Это отдельная тема, касающаяся производительности. Если после очередной сборки бандла вы замечаете, что загрузка сайта начинает ощутимо возрастать, то стоит рассмотреть такие методы, как Code Splitting, Lazy Loading и Tree Shaking.

Весь код из этой статьи находится на Github.

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

Особенности и технические характеристики

Маршрутизаторы TP-Link представлены в разных ценовых сегментах, от бюджетного до премиального. В зависимости от возможностей и технических характеристик, они подходят для решения разных задач – настройки Wi-Fi в маленькой квартире или беспроводной сети в большом офисе. Приборы предлагают разную скорость по Wi-Fi – от 150 до 3000 Мбит/с и поддерживают скорость Интернета от 100 до 3000 Мбит/с.

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

Роутеры TP-Link работают с разными видами подключений – с их помощью можно настроить соединение через оптоволокно, телефонную линию или USB-модем.

Важная особенность продукции компании – это простота настройки. Создать подключение, выбрать режим работы, задать параметры проводной или беспроводной сети можно как через WEB-интерфейс, так и в мобильном приложении (для моделей среднего и премиального ценового сегмента). В веб-интерфейсе для всех маршрутизаторов есть мастер быстрой настройки, с помощью которого сможет настроить соединение даже неопытный пользователь.

Дополнительный функционал роутеров TP-Link очень широк. Технику можно использовать для доступа к IP TV, создания VPN-туннелей, гостевых сетей, настройки файл-, медиа-, FTP- и принт-серверов (через USB) или для решения иных задач.

Сравнить модели и подобрать наиболее подходящую для решения своих задач можно на сайте производителя по ссылке https://www.tp-link.com/ru/home-networking/wifi-router/?page=1

Подключение

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

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

После установки к роутеру нужно подвести кабель от поставщика. Телефонный провод подключается к разъему ADSL, Ethernet-кабель – к порту WAN. Далее от разъемов LAN проводится сетевой кабель к аналогичным входам на системном блоке ПК или других устройствах. Адаптер питания подключается к разъему на корпусе, а затем вставляется в розетку. Если есть кнопка включения, нужно нажать на нее, чтобы запустить роутер, иначе он заработает сразу после подключения к сети.

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

Вход в настройки роутера

Чтобы настроить соединение с Интернетом на маршрутизаторе, нужно знать, как подключиться к TP-Link для решения этой задачи. Все операции с устройством выполняются через WEB-интерфейс.

Инструкция:

1. Запустить любой браузер, в адресной строке ввести IP-адрес 192.168.0.1 или 192.168.1.1.
2. Появится окно, в котором нужно заполнить учетные данные. Если роутер новый, то значения с завода – «admin/admin».
3.  Нажать на кнопку ввода.

Откроется веб-интерфейс, в котором пользователь сможет установить подключение к Сети и настроить роутер TP-Link для дальнейшей работы.

В зависимости от модели маршрутизатора, встречаются 3 типа интерфейса – синий, зеленый и черный. Инструкции для них похожи, но названия и местоположение разделов могут отличаться. Если пользователя интересует настройка для конкретной модели роутера, лучше найти руководство именно для нее.

Читайте, что делать, если не получается зайти в настройки TP-Link.

Автоматическая настройка

Автоматическая или быстрая настройка роутера TP-Link – это самый простой способ настроить соединение с Интернетом. Пошаговый мастер поможет создать подключение даже неопытным пользователям.

Инструкция:

1. Нажать «Быстрая настройка» или «Quick Setup».
2. Выбрать часовой пояс.

1. Установить «Тип подключения». Если маршрутизатор поддерживает такую функцию, кликнуть «Автоопределение», чтобы он самостоятельно выбрал тип соединения.

1.  Если провайдер использует Динамический IP, других данных указывать не потребуется. Если же выбраны Статический IP, PPPOE, PPTP или L2TP, потребуется ввести дополнительные данные – логин, пароль, IP-адрес и т.д., в зависимости от способа подключения. Эту информацию можно получить у поставщика услуг.
2. Выбрать «Не клонировать MAC-адрес».

1. Настроить беспроводную сеть – указать название, включить шифрование, придумать пароль. Если роутер работает на двух частотах, повторить действие для беспроводной сети на второй частоте.

1.  Проверить правильность внесенных настроек, если все верно, нажать «Сохранить».

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

Ручная настройка

Пошаговая ручная настройка роутера TP-Link более гибкая в сравнении с автоматической. В ней пользователю доступно больше параметров, которые можно изменить, в отличие от быстрой, где представлены только основные установки.

Выполнить ручную настройку TP-Link на ноутбуке или компьютере можно с помощью пошаговой инструкции:

1. Кликнуть «Базовая настройка».
2. Нажать «Автоопределение», чтобы маршрутизатор вручную определил тип подключения. Если такой опции нет, нужно узнать у провайдера, какое он поддерживает подключение, и выбрать необходимый вид в списке. Обычно это «Динамический IP», он автоматизирован и не требует ввода каких-либо данных.

1. При выборе «Статического IP» потребуется вручную заполнить IP, маску подсети, шлюз и DNS-сервер.

1. Подключение PPPOE требует указания логина и пароля, предоставленных поставщиком услуг.

1. При установке L2TP или PPTP соединения заполняют имя пользователя, пароль и IP. Если IP-адрес статический, дополнительно вводят маску подсети, шлюз и предпочтительный DNS-сервер.

1. После внесения изменений в работу маршрутизатора сохранить изменения.

Чтобы настройки вступили в силу, роутер будет перезагружен.

Перенастроить маршрутизатор на другой тип подключения можно в разделе «Сеть», вкладка «Интернет».

Настройка через мобильное приложение

Управлять маршрутизаторами TP-Link можно с помощью приложения для Android и iOS. Это функциональная программа, которая работает не со всеми моделями роутеров. Чтобы познакомиться со списком поддерживаемых устройств, нужно открыть страницу приложения в Google Play или в App Store.

Среди возможностей программы:

• просмотр состояния маршрутизатора;
• установка статуса для подключенных пользователей;
• настройка родительского контроля;
• создание гостевых сетей;
• управление роутером на большом расстоянии;
• настройка маршрутизатора: создание подключения, имени и пароля для Wi-Fi сети;
• управление беспроводной сетью в режиме настоящего времени: просмотр подключившихся пользователей, блокировка нежелательных клиентов.

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

Чтобы управлять роутером, нужно просто подключиться к нему по Wi-Fi. Если необходимо настроить новый прибор, его нужно включить в розетку, а затем подключиться к появившейся стандартной беспроводной сети (имя и пароль находятся на наклейке на нижней части маршрутизатора).

Теперь необходимо запустить приложение. Роутер появится в списке обнаруженных устройств. Чтобы начать управлять им, нужно ввести логин и пароль («admin»/«admin» или установленные пользователем).

На главной странице показана схема сети. Можно нажать на любое подключенное устройство и заблокировать его, если оно нежелательно.

Во вкладке «Управление» можно включить или отключить беспроводную сеть, изменить пароль или имя, сделать ее открытой.

В разделе «Родительский контроль» происходит добавление или отключение устройств, к которым применяются установленные параметры. Сама настройка правил выполняется через браузер.

Вкладка «Заблокированные клиенты» показывает заблокированные устройства.

Раздел «Подключение к Интернету» используется при первой настройке роутера. Здесь выбирается тип подключения (Динамический IP, Статический IP и т.д.) и вводятся данные (имя пользователя, пароль, адрес IP и т.д.), которые предоставляет провайдер. Более глубокие настройки выполняются через WEB-интерфейс.

В разделе «Система» выполняется сброс роутера до заводских параметров, перезагрузка, смена паролей для входа в приложение и в веб-интерфейс.

Подключение и параметры Wi-Fi

Создание беспроводной сети на маршрутизаторах TP-Link выполняется в процессе быстрой настройки, но если пользователь ее не сделал, настройку Wi-Fi сети он может выполнить позднее в WEB-интерфейсе роутера.

Роутеры TP-Link могут работать в одном или двух диапазонах, а значит, создать на них можно одну или две вай-фай сети.

Руководство на примере двухдиапазонного маршрутизатора Archer C20:

1. Кликнуть «Выбор рабочей частоты», указать обе частоты или выбрать одну.

1. Нажать «Беспроводной режим 2,4 ГГц». Установить метку в поле «Включить», ввести название сети, включить широковещание SSID, чтобы созданная Wi-Fi сеть была видна в поиске на подключаемых устройствах. Если убрать метку, сеть не будут видеть посторонние, но на своей технике вводить ее название и пароль потребуется вручную.

1. Кликнуть «Защита беспроводного режима». Выбрать тип «WPA/WPA2-Personal», придумать и ввести пароль.

1. Выбрать беспроводной режим 5 ГГц, повторить действия по созданию и защите сети, описанные в шагах 2-3.

Для маршрутизаторов с одним диапазоном не нужно выбирать рабочую частоту. В их веб-интерфейсе необходимо кликнуть «Беспроводной режим», включить сеть, ввести имя и пароль, выбрать, скрывать SSID или нет.

Настройка IP TV

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

Руководство:

1. Подключить IP TV приставку к разъему LAN на корпусе маршрутизатора.
2. В веб-интерфейсе открыть «Сеть» — «IP TV».
3. Включить «IGMP прокси» (если отсутствует кнопка, пропустить шаг).
4. Выбрать разъем LAN, к которому подключена приставка.
5. Для большинства провайдеров выбрать режим «Мост» и сохранить изменения.

1. Некоторые поставщики услуг (Ростелеком) требуют при подключении указание значения VLAN ID. Этот параметр нужно узнать у специалиста поддержки, а затем вместо режима «Мост» выбрать «802.1Q Tag VLAN».
2. Отключить «VLAN TAG для Интернет», в поле «Идентификатор VLAN для услуги IP TV» вписать значение, полученное от провайдера. Выбрать порт для IP TV. Сохранить изменения.

В зависимости от веб-интерфейса, чтобы открыть вкладку «IP TV», потребуется перейти в раздел «Дополнительные настройки», а затем в «Сеть».

Смена пароля

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

1. Открыть вкладку «Системные инструменты».
2. Выбрать «Пароль».
3. Ввести старый логин и пароль (если роутер новый, нужно ввести «admin/admin»).
4. Указать новый логин, придумать, ввести и повторить новый пароль.
5. Сохранить изменения.

Новые логин и пароль не должны быть длиннее 15 символов и содержать пробелы.

Режим повторителя

Режим повторителя (репитера, усилителя сигнала) – удобная опция, позволяющая маршрутизатору получать и усиливать беспроводной сигнал от основного роутера, чтобы расширить площадь его покрытия.

Данный режим присутствует не у всех моделей маршрутизаторов TP-Link. Узнать о его наличии можно в технических характеристиках определенного устройства или в его веб-интерфейсе. Если прибор имеет несколько режимов работы, у него будет раздел «Рабочий режим». Нужно открыть его и найти «Усилитель сигнала», выбрать и нажать «Сохранить».

Роутер перезагрузится. Во вкладке «Состояние» будет видно, что режим работы изменился на «Усилитель Wi-Fi сигнала».

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

Теперь роутер должен подключиться к действующей Wi-Fi сети и расширить ее.

Обновление прошивки

Обновление прошивки маршрутизатора выполняется двумя способами – автоматическим (часть моделей) или ручным. Новые версии для обновления вручную следует скачивать только с официального сайта по ссылке https://www.tp-link.com/ru/support/download/. Загрузка программного обеспечения с других ресурсов может привести не только к поломке роутера, но и к заражению компьютера вирусами или установке вредоносного ПО.

Инструкция по автоматическому обновлению прошивки:

1. Открыть «Дополнительные настройки» и перейти в раздел «Системные инструменты».
2. Выбрать «Обновление встроенного ПО».
3. Кликнуть «Проверить наличие обновлений».
4. Если новая версия ПО будет найдена, появится соответствующее уведомление и предложение установить ее. Нужно подтвердить действие, а затем дождаться завершения загрузки и установки прошивки.

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

Руководство по обновлению прошивки вручную:

1. Загрузить официальный сайт производителя https://www.tp-link.com/ru/support/download/.
2. Выбрать тип устройства и название модели маршрутизатора, перейти на страницу прибора и во вкладке «Встроенное ПО» скачать последнюю версию программного обеспечения. Распаковать архив, извлечь файл.
3. Открыть «Дополнительные настройки» -«Системные инструменты» — «Обновление встроенного ПО».
4. Нажать «Обзор», указать путь к файлу с прошивкой, нажать «Обновить».
5. Дождаться завершения процесса.

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

Сброс настроек

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

Инструкция:

1. Открыть «Дополнительные настройки», выбрать вкладку «Системные инструменты».
2. Кликнуть «Резервная копия и восстановление».
3. Нажать «Восстановить заводские настройки».

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

Часть моделей поддерживают восстановление устройства другим способом. Если на корпусе прибора есть кнопка «Reset», нужно нажать на нее, а затем не менее 10 секунд удерживать нажатой, пока не моргнут индикаторы на корпусе. Будет выполнена перезагрузка роутера и сброс параметров к заводским.

Отзывы

Стоимость маршрутизаторов TP-Link — от 1000 рублей. Техника компании представлена в бюджетном, среднем и премиальном ценовом сегменте, но, независимо от принадлежности к любому из них, все устройства имеют примерно один и те же достоинства и недостатки.

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

Маршрутизаторы TP-link – это надежная техника, выделяющаяся доступной ценой и простотой настройки. Среди нее представлены решения для самых разных задач, будь то настройка беспроводной сети для маленькой квартиры или создание Wi-Fi сети в большом офисе. В статье представлены общие пошаговые инструкции по настройке роутеров TP-Link. Более точную информацию по настройке какой-либо функции можно получить в руководстве к определенной модели.

Статья посвящена пошаговой настройке «Яндекс.Директа» в 2023 году. «Делайте, как правильно, а как неправильно — не делайте!»

Чтобы статья не была слишком большой, мы сжали всю информацию и выдали Вам самые основные моменты, которые приведут Вас к результату. Мы ежедневно откручиваем более 60.000₽ и знаем, о чем говорим!

upd: Статья получилась большой)

ㅤ

Анализ конкурентов в Яндекс Директ 2023

Не буду говорить, что анализ конкурентов — первый и самый важный этап в настройке контекстной рекламы Яндекс Директ, ведь не во всех проектах он необходим, чаще всего мы заранее понимаем, что сработает в рекламе.

· Доказательство — наши результаты. ROMI не ниже 150%

Но, если вы не знаете, как сформулировать Ваше рекламное объявление, УТП, проработать посадочную страницу или взялись за тематику, где Вам вообще ничего не понятно, то:

1. Создаём таблицу, где будет располагаться анализ наших конкурентов и оформляем её в удобном для Вас стиле, например (Все шаблоны будут в нашем телеграм канале) :

2. Анализируем конкурентов и заполняем таблицу:

· Первый столбик — прописываем адреса сайтов конкурентов

· Второй столбик — выписываем заголовок объявления в рекламе конкурентов

· Третий столбик — пишем УТП, которые написаны в объявлениях конкурентов (Берём с заголовка, текста объявления). Не забываем проверить УТП на сайте, тк там могут располагаться совершенно другие преимущества.

· Четвёртый столбик — смотрим, продублирован ли оффер, указанный в объявлении, на сайте.

Для чего нужен этот дубль? Этот приём снижает % отказов и повышает конверсию из клика в лид, тк человек, перешедший по определённому офферу, не теряется при виде совершенно другого предложения.

Мы даже писали статью, где с помощью мультилендинга увеличили результаты в проекте в 10 раз благодаря формуле оффер в объявлении = оффер на посадочной странице

· Пятый столбик — смотрим на качество сайта, выписываем все плюсы и минусы. Это поможет нам в дальнейших корректировках посадочной страницы (При необходимости).

ㅤ

Зачем нам нужна эта таблица?

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

ㅤ

Почему так мало аналитики?

Здесь собраны все данные, на которые вы реально сможете повлиять и что принесет результат.

ㅤ

Где анализировать конкурентов?

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

Для аналитики мы не используем какие-либо сервисы, но и не призываем Вас не использовать их.

Поиск в Яндекс

Первый способ для анализа конкурентов в Яндекс Директ – посмотреть реальную выдачу по ключевым словам в нужном регионе.

Раздел “реклама” на поиске

Далеко не все объявления можно найти на странице с поиском. Некоторые конкуренты просто не попадают в первые места из-за низких ставок, но реклама у них все равно идет.

ㅤ

Сбор ключевых слов в Яндекс Директ 2023

Ключевые слова нам нужны при настройке рекламы, они помогут алгоритмам Яндекс Директа быстрее обучиться и попасть в нашу ЦА.

Самый простой способ сбора ключевых слов – вордстат.

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

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

ㅤ

Как создать аккаунт Яндекс Директ 2023

Для запуска рекламы в Яндекс Директ необходимо иметь аккаунт Яндекса. Если у вас уже есть аккаунт, то входите в него, но если у вас новый проект или нет аккаунта, создаете новый.

Как создать аккаунт в Яндексе?

· Выбираете — Создать ID (вторая красная стрелка)

· Регистрируете новый аккаунт

ㅤ

Объявления в Яндекс Директ 2023

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

Если у в Вашей тематике нет спроса или Ваш оффер и УТП не могут конкурировать с другими рекламодателями, то никакая настройка Яндекс Директ Вам не поможет.

ㅤ

Что самое главное в объявлении

УТП (Уникальное торговое предложение) — один из элементов для успешного запуска рекламы. После анализа конкурентов, Вы, наверняка, уже составили свои УТП.

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

ㅤ

Пример хорошего объявления Яндекс Директ:

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

Единственное, что я бы добавил — конвертики (Стоимость, сроки и тд.)

Пример плохого объявления Яндекс Директ:

Заголовок абсолютно без релевантности, слишком узкое предложение и боле нацелено на ключевик «Купить угловой диван» или «Купить угловой диван-кровать«, но никак не на «Купить диван премиум класса«.

Текст объявления тоже желает лучшего. А в уточнениях могли бы раскрыть свои УТП, мне бы, при покупке дивана, в последнюю очередь хотелось бы знать о квадратах их шоурума.

На первом месте они только из-за высокой ставки за клик, в этом и проблема Яндекс Директ — финансозависимость.

ㅤ

Настройка Яндекс Директ 2023

Узнав, какими должны быть объявления, проанализировав конкурентов и прописав УТП, мы можем перейти к созданию рекламных кампаний.

С помощью данной пошаговой инструкции вы сможете настроить Яндекс Директ самостоятельно. Пошаговый план подойдёт даже для новичков.

ㅤ

Настройка поисковой кампании Яндекс Директ 2023

Первым делом мы даём название нашей рекламной кампании и вставляем ссылку на нашу посадочную страницу (Сайт)

Выбор места показа рекламы. На этом этапе мы выбираем, где будет размещаться наша реклама, в данном случае это «Поиск Яндекса». Когда мы будем настраивать РСЯ, нам необходимо будет выбрать «Рекламная сеть Яндекса».

Никогда не выбираем «Поиск и Рекламная сеть Яндекса», всегда разделяйте поиск и РСЯ на разные рекламные кампании

ㅤ

Стратегии Яндекс Директ 2023

Если раньше Яндекс Директ в основном у всех работал на ручных стратегиях (Где вы сами управляли ставками и делали разные корректировки), то сейчас все больше и больше работают автоматические стратегии (Максимум кликов и Максимум конверсий).

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

Максимум кликов с ручными ставками — это стратегия с ручным управлением, где вы самостоятельно выставляете ставки по запросам и вносите какие-либо корректировки.

Максимум конверсий — это автоматическая стратегия, где вы выбираете определённую цель из метрики, на которую будет акцентировать своё внимание Яндекс и обучаться алгоритм. После обучения алгоритма, который происходит в течение недели — двух недель, Яндекс дает неплохие результаты.

Нельзя сказать, какая стратегия лучше, Ваш проект индивидуален, поэтому нужно тестировать всё, но мы используем только «Максимум конверсий» по недельному бюджету.

ㅤ

Вид оплаты, ограничения расхода

Выбираем стратегию «Максимум конверсий» и выбираем, каким образом будет происходит оплата, за клики или за конверсии. Мы чаще всего работаем по оплате за клики.

Оплата за конверсии — платим только тогда, когда человек совершил определённое действие, которое мы указали в рекламной кампании. Сумму оплаты мы выставляем сами, но знайте, что у этого вида оплаты есть свои минусы:

Далее выставляем недельный бюджет, который Вы готовы тратить на Вашу рекламную кампанию, Яндекс будет тратить не более этой суммы в неделю

И выставляем ограничение расхода. При оплате за клики, у нас 3 варианта ограничения:

Недельный бюджет — мы полностью даём волю Яндекса, ограничивая его только недельным бюджетом, алгоритмы сами будут обучаться и двигаться к удешевлению стоимости конверсии. Мы всегда выбираем этот вариант.

Средняя цена конверсии — мы даём понять, к какой цене за конверсию нам надо придти, а алгоритмы Яндекс Директ уже будут отталкиваться от этой цены. Это не даёт гарантии, что Вы будете получать конверсии по необходимой Вам стоимости и если вы сильно её занизите, Яндекс попросту будет зажат и не даст Вам трафика.

Доля рекламных расходов (ДРР) — это возможность платить за продажу определенный % от ее стоимости. Если задуматься, то это очень выгодно. И даже не потому, что остальные возможные конверсии, не попадающие в e-com будут обходиться клиенту бесплатно. А это выгодно, в первую очередь, если на сайте продается много товаров по низкой цене, но есть и дорогие позиции, но средний чек небольшой.

Стратегию ДРР в рекламе применяют редко, т.к. для этого должна как часы работать электронная коммерция (e-com) и ДРР долго раскручивается.

ㅤ

Счетчик Яндекс Метрики и цели

Здесь вы добавляем созданный нами и привязанный к сайту счетчик метрики и выставляем ту цель(и), на которую(ые) будет нацеливаться алгоритм Яндекса.

Расписание показов, контакты, UTM, промоакции

Выставляем расписание показов нашей рекламы. Мы будем показываться только в то время и те дни, которые мы выставим. Это очень удобно, если Ваш ОП работает не 24/7.

Добавляем контакты нашей организации (если она есть на яндекс картах).

И добавляем параметры utm меток (Где брать utm метки — выложим в нашем телеграм канале). Обычно мы не используем этот пункт в настройке, а вставляем utm метки прямо в рекламных объявлениях, но если у Вас одна и та же utm метка на все объявления, то можете использовать это окошечко

Добавляем промоакцию (Специальное предложение). Промоакция сделает наше объявление заметнее и привлекательнее.

ㅤ

Дополнительные настройки

Корректировки. Вы можете корректировать ваши ставки по полу и возрасту, устройствам, платёжеспособности, регионам и так далее.

Например, если вы ваша ЦА — женщины в возрасте от 25 до 34, то Ваши корректировки должны выглядеть так:

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

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

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

Эксперименты. Не трогаем

Запрет показов. Запрещаем определённым площадкам в РСЯ показ наших объявлений, но для поиска это не нужно.

Приоритизация объявлений. Если мы рекламируемся на поиске, то в 90% случаев у вас должна быть включена «По фразе, наиболее близкой к запросу», я уже упоминал про релевантность объявлений

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

Остальные пункты оставляем в положении, как на скрине.

Далее нажимаем — продолжить.

ㅤ

Настройка групп объявлений Яндекс Директ 2023

География показов. Выбираем регион(ы) показа объявлений.

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

Тематические слова (Ключи). Здесь мы добавляем наши ключевые фразы, по которым будет показываться реклама.

Важно! Разделяйте Ваши ключевые слова на группы объявлений по схожести смысла ключей, разновидности товара/услуг, так Вы не будете показывать объявление нецелевым запросам и повысите CTR вашего объявления, к примеру:

Остальные блоки для поисковой кампании можно пропустить и перейти к следующему этапу. В самом низу нажимаем — продолжить.

ㅤ

Настройка объявлений Яндекс Директ 2023

Вставляем ссылку с utm меткой (Если в самом начале настройки не указывали параметры utm) на нашу посадочную страницу и заполняем отображаемую ссылку (Туда лучше вписать основной запрос, не забываем про релевантность объявлений).

Заголовок, дополнительный заголовок, текст. Пишем заголовок, дополнительный заголовок (Яндекс показывает дополнительный заголовок, если ширина объявления не превышает 517 пикселей) и текст объявления, стараясь расписать все преимущества, УТП и придерживаясь правила релевантности.

Видео, изображение, карусель, кнопка. Эти пункты для РСЯ, их заполнять необязательно.

Цена. Прописываем при наличии цен.

Уточнения. Здесь прописывайте Ваши преимущества.

Длина одного уточнения до 25 символов, можно добавить четыре уточнения.

Быстрые ссылки. Можно добавить до восьми быстрых ссылок, также обязательно прописывайте описание к быстрым ссылкам.

Заполняйте все 8 быстрых ссылок!

ㅤ

Запуск рекламной кампании Яндекс Директ

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

Если вы хотите добавить другие ключевые слова и объявления нажимаете — добавить группу и проходите по тем же этапам, что до делали до этого.

После нажатия кнопки «запустить компанию», Яндекс предложит вам пополнить баланс, вы можете либо пополнить его сразу, либо отказаться и пополнить позднее.

Настройка РСЯ в Яндекс Директ 2023

Реклама РСЯ — Это реклама на тематических площадках Яндекса.

Реклама в РСЯ дешевле, чем реклама на поиске, но трафик менее качественный, тк мы показываемся аудитории, что интересовалась продуктом/услугой когда-то, а не прямо сейчас.

Первые шаги в настройке РСЯ идентичны настройке поисковой кампании, только при выборе места показа — выбираем только в «Рекламной сети Яндекса»

Минус слова, запрет показов. При настройке РСЯ не добавляем минус-слова, так как они сократят охваты. Корректируем РСЯ с помощью запрета показов на определённых площадках, которые сливают наш бюджет.

Директологи давно собрали основной список площадок, которые будут сливать Ваш бюджет, скачать его сможете в нашем телеграм канале.

ㅤ

Автотаргет в РСЯ, ключи

Более 90% трафика в РСЯ идёт с автотаргета, самое главное — показать Яндексу, в какую сторону ему двигаться, для этого берите 1-2 высокочастотных ключа на группу объявлений, которые бы описывали Вашу ЦА

ㅤ

Изображения в РСЯ

Размеры картинок для рся следующие (соотношение сторон): 240×400, 300×250, 300×500, 300×600, 336×280, 640×100, 640×200, 640×960, 728×90, 960×640, 970×250.

Не менее 450 × 450 пикселей, не более 10 Мбайт.

Изображения в РСЯ должны привлекать внимание и(или) описывать Ваш продукт.

Пример картинки в рся:

ㅤ

Настройка ретаргетинга 2023

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

Для настройки ретаргетинга нужно зайти в настройки рекламной кампании, найти раздел-ретаргетинга подбор аудитории. В данном разделе добавить условия из метрики, к примеру — посещение сайта. Таким образом реклама будет показываться людям, которые посещали ваш сайт. Но и здесь есть минус, реклама также будет показываться и людям, которые не посещали Ваш сайт, это всё из-за автотаргета, который в РСЯ не выключить. Если будете запускать ретаргет — запускайте с оплатой за конверсию.

ㅤ

Директ коммандер для Яндекс Директ 2023

Программа для профессионального управления рекламой в Яндекс.Директе без использования веб-интерфейса, помогает работать с большим количеством объявлений, групп, кампаний в пару кликов. Данная программа абсолютно бесплатная и её можно скачать с официального сайта Яндекса.

ㅤ

Настройка мастер кампаний 2023

Мастер компаний – это упрощенный способ настройки рекламы в Яндексе. В целом с помощью него можно достаточно быстро настроить рекламу, но есть конечно и минусы. Файл по настройке Мастер кампаний оставили конечно же в нашем телеграм канале)

ㅤ

Модерация Яндекс Директ

Модераторы Яндекса проверят вашу рекламу на соответствие правилам и только после этого вы сможете её запустить.

ㅤ

Яндекс Метрика

Яндекс Метрика — это сервис веб-аналитики, который позволяет оценить посещаемость сайтов и поведение пользователей на них.

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

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

Для создания метрики нужно сформировать код счётчика и установить на сайт.

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

Для создания счётчика вам нужно зайти в Яндекс Метрику и нажать кнопку «добавить счётчик».

После этого ввести название счётчика, ввести ваш домен.

После сохранения вы увидите код Яндекс метрики, который нужно поставить на сайт, чтобы заработал ваш счётчик.

ㅤ

Цели в метрике

В 2023 году Яндекс метрика умеет создавать автоматические цели.

Такие как: отправка формы, нажатие на кнопку, нажатие на телефон и другие.

Автоматический цели не всегда корректно работает, поэтому лучше создавать цели самому. К примеру цель на заявку лучше сделать на достижение страницы «спасибо».

Создаем цель «заявка» на посещение страницы спасибо.

Для этого нажимаем на наш счётчик и слева переходим в раздел «цели». Далее нажимаем добавить цель. Выбираем раздел посещения страниц, вводим название нашей цели и в поле «условие» вводим адрес нашей страницы спасибо.

ㅤ

Ведение рекламной кампании Яндекс Директ 2023

Если вы просто запустили рекламу в Яндекс директе и дальше её никак не оптимизируете, скорее всего результат будет не очень удовлетворительный.

На самом деле ведение рекламных кампаний – это 70 – 80% работы. Именно за счёт введения достигаются впечатляющие результаты.

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

ㅤ

Отчёт по ключевым словам на поиске.

Отчёт по ключевым словам на поиске покажет вам по каким конкретно запросам были переходы на ваш сайт.

Для это нажимаем «статистика» под рекламной кампанией.

Далее нажимаем на «Поисковые запросы» и выбираем необходимый нам временной промежуток. Фильтр «Клики» лучше убрать. Нажимаем «Показать»

С помощью него вы можете найти нецелевые запросы и добавить минус слова.

Отчёт по площадкам в рся

В отчёте по площадкам вы можете посмотреть какие площадки дают заявки, а какие нет.

После анализа статистики вы можете отключить неэффективные площадки, либо площадки, которые дают очень дорогие лиды.

ㅤ

Где найти все таблицы, файлы, ссылки, которые были упомянуты в этой статье?

ㅤВсе необходимые файлы мы выложили в нашем телеграмм канале — тут

Спасибо за прочтение данной пошаговой инструкции по настройке Яндекс Директ в 2023 году, надеемся, что она была для Вас полезна и принесла какие-либо плоды в Ваш проект.

Мы пишем только то, что проверено на наших проектах и не берём информацию из головы.

⠀

Ну а если у Вас уже настроена реклама, но:

· Нет окупаемости и реклама идёт в нуль

· Дорогие заявки, не попадаете в KPI

· Не получается масштабироваться до нужного бюджета

· Нет системности в трафике, всё ломается

⠀

Или только хотите запустить трафик в Я.Директ, Telegram или *Instagram?

То записывайтесь (Телеграм) на бесплатную консультацию и узнайте, как решить любую из ваших проблем и привести трафик в Ваш проект c окупаемостью 150%+ (При долгосрочной работе цифры в разы больше)

Продуктивного Вам дня!

Другие полезные статьи

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

План настройки

Общий алгоритм работы с любым роутером можно описать следующим образом:

1. Сначала проверяют настройки самой операционной системе. Главное – проследить за тем, чтобы параметры сети не изменяли никаким образом.
2. Установка роутера. Обязательно подсоединяют провода и берут устройства, с помощью которого и будут выставлять параметры.
3. Далее потребуется найти панель с необходимыми параметрами.
4. Подключают интернет.
5. Настраивают соединение.
6. При необходимости – меняют сами пароли.
7. Выставляют дополнительные параметры, которые могут потребоваться в дальнейшей работе.

Далее каждый пункт настройки роутеров заслуживает отдельного рассмотрения. Можно посмотреть небольшое видео по настройки Wi-Fi роутера TP-Link.

Установка и подключение

От поставщиков интернета зависит, какие технологии будут поддерживаться в том или ином случае.

Самый распространённый вариант для настройки роутеров – когда напрямую к компьютеру идёт кабель от провайдера. Понадобится только сетевая карта, никаких дополнительных устройств. С самостоятельной настройкой не должно возникнуть никаких проблем. В операционной системе уже есть всё необходимое.

1. Кабель провайдера извлекают из сетевой карты на компьютере, переключают его в роутер, в гнездо WAN.
2. Свободное гнездо роутера соединяют с гнездом в компьютере с помощью кабеля, который идёт в комплекте.
3. Подключают блок питания.
4. Включают компьютер и блок питания.
5. Ждут, пока оба устройства загрузятся.

Главное – не забыть посмотреть пароль и имя сети на наклейке к роутеру. Остаётся подключиться к сети, а потом завершить настройку, выставив параметры в нужное значение.

Дополнительный ADSL-модем для связи с интернетом – ещё одно решение, которое часто применяют на практике. Это отличный вариант для тех, кто думает, как подключать роутер.

В случае с ADSL-моделью придётся пройти такие шаги:

1. Маршрутизатор и телефонную линию соединяют друг с другом.
2. Сетевой разъём компьютера соединяют с одним из портов у роутера.
3. Включают компьютер.
4. Блок питания вставляют в разъём, потом подключают к розетке.
5. Нажимают на кнопку включения, если она есть.

Остаётся разобраться с тем, как подключиться самостоятельно к WiFi роутеру.

Вход в настройки

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

Пример числового адреса – 192. 168. 0. 1. Они тоже могут быть разными в зависимости от производителя. На нижней крышке устройства представлена соответствующая информация, либо она указана в инструкции.

Строчка ниже указывает на логин и пароль, которые необходимы для входа в систему. Далее можно более подробно разбираться в том, как подключать роутер к интернету.

Обычные адреса входа в настройки: 192. 168. 1. 1 и 192. 168. 0. 1

Обычный логин и пароль: admin admin

Первая настройка интернета

Самое важное – чтобы роутер правильно был подключен к самому провайдеру. Иначе на всех устройствах подключение будет, но с оговоркой “без доступа к интернету”.

У каждой компании свой вариант подключения, который нужно указать в панели управления.

1. PPTP.
2. L2TP.
3. PPPoE.
4. Динамический айпи.
5. Статический айпи.

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

Сразу после подключения всё работает только при использовании “Динамического IP”. На маршрутизаторах такие функции выставляются по умолчанию, если они есть. Это важно для тех, кто интересуется, как подключать роутер к компьютерам и настраивать интернет.

Настройка Wi-Fi

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

Один из важных вопросов – стандарт Wi-Fi. Лучше выбирать 802.11bng, если устройство поддерживает такой вариант. Это самое современное решение, которое гарантирует сохранение высоких скоростей. Лишь некоторые гаджеты не совместимы с ним.

802.11n – более медленная скорость, но и этот стандарт остаётся актуальным в настоящее время. В этом случае о совместимости устройств можно не беспокоиться.

Некоторые роутеры двухиапазонные, работают на 2,4 и 5 ГГц. Пользователь может выбирать любой из доступных вариантов. Сети на 5 ГГц обычно не так сильно загружены, поэтому и скорость у них выше. Зато радиус покрытия не такой большой. Не каждое устройство работает с такой технологией. Поэтому важна правильная самостоятельная настройка. Смотрите рисунок как в нашем роутере.

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

Надо учитывать физические преграды. Беспроводная сеть работает лучше, если между маршрутизатором и приёмником будет меньше мебели, стен, других подобных объектов. Это важно учитывать, когда идёт подключение роутера.

Смена пароля роутера

На первых этапах пользователь использует пароль, установленный по умолчанию. Недостаток этого метода в том, что такие данные известны всем. Поэтому посторонние люди могут запросто посмотреть не только саму защиту, но и использовать устройство по своему усмотрению. В том числе перенастраивать их и подсоединить то, что владельцу совсем не нужно.

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

Видеоверсия настройки

Для тех что не любит читать –  видео нашего подборщика настройка за 5 минут.

Дополнительные настройки

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

1. WPS. Быстрое подключение к вайфаю, только по одному ПИН-коду. Логин и пароль от роутера не понадобятся.
2. IPTV. Функция доступна, если сам провайдер поддерживает интерактивное телевидение. Главное, чтобы все элементы были подключены правильно, иначе скорость и качество трансляций уменьшаются.

Если что-то не получается и не работает так, как нужно – рекомендуется сбрасывать настройки до заводских. Для этого на задней крышке существует кнопка Reset или Сброс. Она находится в углублении, поэтому лучше использовать что-то узкое, чтобы добраться. Об этом тоже надо помнить, когда решается вопрос, как установить роутеры.

Какие частые проблемы?

Дополнительные рекомендации

Мобильные роутеры помогают решать проблемы там, где нельзя использовать проводное подключение. Эти устройства соединяют с ноутбуками или ПК при помощи технологии USB. После этого должна автоматически запуститься программа установки, в том числе выставляющая настройки маршрутизатора.

Если автозапуск отсутствует – всё запускается вручную. Достаточно найти файл под названием AutoRun.exe, в том числе через Проводник. Иногда такие файлы называются Setup.exe. В процессе установки будут поставлены и необходимые драйверы.

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

Правильная инструкция будет такой:

1. Готовят гнездо для розетки.
2. Готовят механизм к монтажу, в полном соответствии с инструкцией производителя.
3. Далее берут кабель UTP. Не важно, это витая пара или другие разновидности устройств.
4. С конца витой пары обязательно снимают изоляцию, чтобы можно было разглядеть все внутренние компоненты.
5. Жилы продевают в соответствии со стандартной схемой.
6. Если схема отсутствует, можно действовать согласно общепринятому порядку.
7. Часть с фиксатором должна быть подведена к основной части розетки.
8. Розетку монтируют в гнезде, сверху фиксируют лицевую панель.

Особенно важным вопросом считается выбор провайдера. В одной Москве таких компаний работает более 300. Иногда на территории только одного дома работает до десяти таких компаний. Рекомендуется заранее звонить в службу технической поддержки, чтобы узнать, как осуществляется работа. Там же при необходимости подскажут, как подключать интернет через роутер.

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

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

Иногда роутеры начинают виснуть или связь прерывается. Это может происходить, даже если изменены некоторые параметры. Сеть начинает работать по другим установкам. Стоит быть готовыми к тому, что разным устройствам потребуется время, чтобы переподключиться и использовать новые параметры. Lan ID менять не нужно.

При необходимости в таких ситуациях просто включают и выключают Wi-Fi, либо сначала забывают сеть, а потом снова входят в неё. Как установить вай фай пароль – отдельная тема.

Заключение

Выбор роутера часто зависит от того, какой тип подключения использует тот или иной провайдер. Самостоятельная настройка большинства современных моделей – процесс достаточно простой. Главное – быть внимательными и точными. Большая часть ошибок связано с вводом данных и неправильным подключением.