Webpack введение

Webpack: введение

Мы подошли к тому моменту, когда мы уже увидим, как добавить веб-пакет в наши проекты..

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

Лично я использую веб-пакет для нескольких целей:

  1. перевод SCSS в CSS
  2. перевод ESNext в JS
  3. объединение файлов
  4. минимизация двух финальных файлов .CSS и .JS

Инициализировать проект и установить веб-пакет

Node.JS

Сначала мы должны уточнить, что веб-пакет был разработан с использованием Node.JS, поэтому вы должны сначала загрузить и установить его..

Перейдите на http://nodejs.org/en/ и загрузите его. Лучше получить версию LTS (долгосрочная поддержка), а не «Текущая». LTS лишь немного старше, но намного стабильнее. С выпуском более новой версии выпускается более новая LTS, так что не волнуйтесь, она устарела..

Установив Node.JS через консоль, вы теперь сможете вызывать команды inpm..

Читать также:  Пользовательский параллакс без какихлибо библиотек

Вы также можете использовать командную строку в Windows, но я советую вам установить CygWin или другой эмулятор для команд * NIX.

* Консоль NIX

В настройках Windows 10 вы можете включить полную версию Ubuntu Bash, которая включает полную консоль Linux Ubuntu. Вы даже можете устанавливать программы с помощью apt-get install. Для получения дополнительной информации о том, как это сделать, вы можете прочитать обзор Ubuntu Bash в Windows 10 (настройка, недостатки, улучшение и вердикт);

Я лично предпочитаю консоль bash, которая поставляется с установкой Git для Windows..

Некоторым из моих коллег нравится ConEmu.

npm

Сначала создайте новую папку на вашем локальном сервере. Откройте консоль и убедитесь, что вы перешли в эту папку. Введите npm init, чтобы инициализировать новый проект..

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

Читать также:  Базовые селекторы CSS

В результате в папке будет создан новый файл с именем papakage.json с аналогичным содержимым:

{"name": "webpack-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": {"test": "echo \ "Ошибка: не указан тест \" exit 1 "}," author ":" "," license ":" ISC "}

Зависимости

Когда у нас есть проект, мы должны установить так называемые «зависимости». Это инструменты / библиотеки, функциональность которых мы будем использовать в нашем проекте..

Есть 2 основных типа зависимостей:

  1. необходимо для запуска финальной версии нашего проекта
  2. необходимо для развития нашего проекта

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

Установка зависимости webpack dev

Введите npm install webpack —save-dev..

  • подкоманда installеnpm для установки нового модуля.
  • webpack — это имя модуля, который мы хотим установить
  • —save-dev указывает, что это зависимость от разработки, а не сам окончательный проект.
Читать также:  Начало работы в HTML некоторые основные теги

В файл package.json должны быть добавлены следующие строки:

"devDependencies": {"webpack": "^ 4.29.6"}

Файловая структура

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

webpack-project | -dist | -src | | -js | | `-functions.js | `-scss | `-style.scss` -index.html

Другими словами:

  • в папке проекта в haveindex.html
  • да, у нас также есть пустая папка-папка
  • иметь другое имя папки dsrc
  • в последнем должны быть еще 2 папки: jsиscss
  • у нас всегда есть файл с именем functions.js
  • в папке scsss есть файл style.scss

Файлы, которые webpack сгенерирует на основе нашего src-кода, будут сохранены в папке.

Код для index.html

Содержимое этого файла может быть простым:

!DOCTYPE html>
html>
голова>
мета-кодировка = "utf-8" />
заголовок> тест веб-пакета / заголовок>
meta name = "viewport" content = "width = device-width, initial-scale = 1" />
ссылка rel = "stylesheet" href = "dist / style.bundle.css" />
/ голова>
тело>
script src = "dist / functions.bundle.js"> / script>
/ body>
/ html>

Не беспокойтесь, что файлы distist / style.cssidist / functions.bundle.js еще не существуют, и попытка загрузить их в файл покажет ошибки..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?