Веб-разработка быстро растет, и новые технологии появляются изо дня в день. 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. Вы можете скачать исходный код этой части по этой ссылке.