Веб-разработка быстро растет, и новые технологии появляются изо дня в день. 10 лет назад пользовательский интерфейс почти всех веб-сайтов был создан только с помощью HTML / CSS и JavaScript. В настоящее время разработчикам frontEnd необходимо изучить node.js, webpack, некоторые другие полезные зависимости (например, babel) и хотя бы одну мощную структуру (например, React.js, Vue.js… и т. Д.).

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

Прежде всего, давайте определимся с этими понятиями:

  • Модуль JavaScript: отдельный файл JS, в котором у вас есть класс или определенная функция, которая выполняет определенную работу и должна вызывать ее много раз.
  • Webpack: webpack - это зависимость, которая позволяет импортировать и экспортировать отдельные файлы JS.
  • Babel: тоже зависимость. Он скомпилирует ваш код ES6 + в простой код JavaScript (например, const будет преобразован в var), поэтому даже когда пользователь использует старый браузер, ваше приложение будет совместимо с этим старым браузером.

Предпосылки:

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

У вас должен быть современный редактор кода, такой как VSCode и Node.js, чтобы иметь возможность использовать диспетчер пакетов узлов (npm) в вашем терминале. Итак, если на вашем локальном компьютере эти 2 не установлены, загрузите и установите их, чтобы иметь возможность писать и запускать код.

Инициализация файлов package.json и webpack.config.js:

Теперь, прежде чем открывать VSCode, создайте папку для сохранения вашего проекта. Откройте VSCode и в верхнем левом углу щелкните file, затем щелкните Open folder и выберите папку, которую вы только что создали для своего проекта. Откройте терминал, нажав Ctrl + Backticks или нажав terminal - ›new terminal.

В интегрированном терминале введите npm init -y, чтобы инициализировать package.json file. Теперь вам нужно создать новый файл в корневом каталоге с именем webpack.config.js, который будет обрабатывать конфигурацию webpack.

Понимание работы Webpack и управление папками проекта:

Теперь давайте объясним, что будет делать Webpack. Webpack сгенерирует один большой файл, который соберет все ваши JS-файлы вместе, и этот файл является единственным необходимым файлом, который будет включен в ваш HTML-документ. Вы можете называть сгенерированный файл как хотите, но обычно его называют bundle.js, а также обычно называют свой основной файл JS (который импортирует другие модули) index.js. Кроме того, для профессионального проектирования папок вы должны создать папку с именем dist, которая будет обрабатывать связанный код и HTML-документ, и создать другую папку с именем src для обработки основного файла JS, других модулей и, конечно же, ваших файлов CSS. Теперь корневой каталог вашего проекта должен выглядеть примерно так:

Давайте создадим index.html внутри папки dist и поместим в нее следующие строки кода:

<!DOCTYPE html>
<html lange="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack tutorial</title>
  </head>
  <body>
</body>
</html>

Теперь давайте назовем связанный файл в нашем HTML-документе. Поместите эту строку кода прямо перед закрывающим тегом тела: <script src="./bundle.js"></script>. Давайте также создадим основной JS-файл, о котором мы говорили, в папке src. Создайте файл с именем index.js в папке src. Типа там alert('Hello, World!');.

Конфигурация Webpack:

Теперь вернемся к webpack.config.js файлу. Нам нужно структурировать этот файл, чтобы Webpack знал, где находится наш основной JS-файл и где сгенерировать наш связанный файл. Поэтому нам нужно сообщить ему о точке входа нашего кода и выходном каталоге. В самой первой строке запросим path со строкой кода: const path = require('path');. Теперь скопируйте и вставьте эти строки кода, чтобы Webpack знал, где искать исходный код и где его сгенерировать:

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Установка и запуск webpack:

Итак, пора установить Webpack. Запустите npm install -D webpack webpack-cli в своем терминале, чтобы установить веб-пакет, а затем запустите npx webpack --mode development, чтобы сгенерировать связанный файл. Теперь вы можете открыть файл index.html в браузере, и вам будет показано предупреждение с предложением Hello, World!.

Поздравления 🥳. Вы правильно установили Webpack и теперь можете создавать разные модули и запускать их вместе в одном файле.

npx webpack, npx webpack - смотреть и запускать npm start:

Давайте изменим код внутри index.js и проверим, не изменится ли страница: вместо alert('Hello, World!); введите alert("I'm a new text"); и обновите страницу в браузере. Это не сработало ?? Да, это потому, что нам нужно запускать npx webpack --mode development всякий раз, когда мы вносим какие-либо изменения в index.js файл. Запустите эту команду и снова обновите страницу. Отлично, снова работает. Но раздражает запускать эту команду всякий раз, когда мы вносим какие-либо изменения в наш код. К счастью, мы можем заставить webpack следить за нашим кодом и связывать его всякий раз, когда мы вносим какие-либо изменения. Это можно сделать, запустив этот небольшой код npx webpack --watch --mode development. Однако мы можем обработать эту команду в нашем package.json файле, добавив"start": "webpack --watch --mode development", в свойство scripts. Чтобы проверить это, закройте терминал, нажав Ctrl + c и запустите npm start. Бум, теперь webpack следит за нашим кодом, поэтому всякий раз, когда мы вносим какие-либо изменения в файл index.js, файл bundle.js тоже будет изменен.

Этого достаточно для первой части урока. Если вы хотите узнать, как установить babel и объединить файлы css в свой bundle.js файл, прочтите Создание модулей в JavaScript с использованием Webpack и Babel - Часть 2. Вы можете скачать исходный код этой части по этой ссылке.