Узнайте больше об инструменте упаковки модулей webpack.

1. Что такое веб-пакет

1. Официальное объяснение

По сути, веб-пакет — это статический модульный инструмент для упаковки текущих приложений JavaScript. (Это предложение можно свести к двум пунктам: модули и упаковка )

Давайте поговорим о концепциях модулей и упаковки !

2. Модульность внешнего интерфейса.

• Некоторые решения для модуляризации внешнего интерфейса: AMD, CMD, CommonJS, ES6 (браузеры не могут их распознать , но веб-пакет может быть их базовой поддержкой до того, как будет выполнена модульная разработка).
• До ES6 , если вы хотите использовать модульность. Разработка требует помощи других инструментов , чтобы мы могли осуществлять модульную разработку.
• После завершения проекта посредством модульной разработки нам также необходимо разобраться с различными зависимостями между модулями, а также интегрировать и упаковать их.
• В это время появляется один из веб-пакетов . core заключается в том, что он позволяет нам вести модульную разработку и помогает нам справляться с зависимостями между модулями.
• В качестве модулей в веб-пакете можно использовать не только файлы JavaScript , CSS , изображения , файлы json и т. д.

3. Как разобраться в упаковке?

• Webpack может помочь нам организовать модульность и справиться с различными сложными связями между модулями . Концепцию упаковки легко понять.
• Это упаковка и объединение различных модулей ресурсов в веб-пакете в несколько пакетов (Bundle).
• В процессе упаковки ресурсы также могут обрабатываться , например, сжимать изображения, конвертировать scss в css и конвертировать синтаксис ES6 в ES5, конвертировать TypeScript. для JavaScript и других операций.
• Инструменты упаковки включают grunt/gulp.

Сравнение между webpack и grunt/gulp.

• Ядром grunt/gulp является Task.
  1. Вы можете настроить серию задач и определить транзакции , которые будут обрабатываться задачами (например, ES6, преобразование ts, сжатие изображений, преобразование scss в css).
  2. Затем позвольте grunt/gulp выполнить эти задачи последовательно и автоматизируйте весь процесс ,

• чтобы увидеть задачу gulp.
  1. Следующая задача — преобразовать все js-файлы в src в синтаксис ES5.
  2. И наконец вывод в папку dist.
  

• Когда использовать хрюканье/глоток?
  1. Зависимости модулей проекта очень простые, а концепция модульности даже не используется.
  2. Просто используйте grunt/gulp для простого слияния и сжатия.
  3. Если во всем проекте используется модульное управление и взаимозависимость очень сильная, можно использовать вебпак.

• В чем разница между grunt/gulp и webpack?
  1. grunt/gulp уделяет больше внимания автоматизации процессов внешнего интерфейса, а модульность не является его основой.
  2. В Webpack больше внимания уделяется модульному управлению разработкой, и такие функции, как сжатие файлов, слияние и предварительная обработка, входят в его состав.

2. Установка веб-пакета

(для нормальной работы wepack должен полагаться на среду узла , а среда узла должна быть установлена). требуется для нормального выполнения. Используйте инструмент npm для управления различными зависимыми пакетами в узле.

• Поэтому для установки веб-пакета необходимо сначала установить Node.js. Node.js поставляется с инструментом управления пакетами npm
• для глобальной установки веб-пакета (npm install webpack@). 3.6.0 -g) и
• для локальной установки webpck (npm install [email protected] --save-dev) –save-dev является зависимостью разработки и не требует использования после упаковки проекта.

3. Конфигурация веб-пакета

1. Анализ файлов и папок.

• Папка dist: используется для хранения файлов, упакованных позже.
• Папка src: используется для хранения исходных файлов, которые мы написали.
  main.js : входной файл проекта.
  mathUtils.js : определяет некоторые функции математических инструментов, на которые можно ссылаться и использовать где угодно.
  index.html : браузер открывает отображаемую домашнюю страницу в формате html (здесь упоминается содержимое окончательно упакованного файла в src, то есть папка dist ).
  package.json : создается с помощью npm init, файла, управляемого пакетом npm.

Ниже приведен код в файлах mathUtils.js и файле main.js : (спецификация модуляризации CommonJS, CommonJS — стандарт модульности, nodejs — реализация CommodJS (модуляризация))

2. Команда

webpack ./src/main.js ./dist/bundle.js (упаковать файл main.js в файл Bundle.js).

Описание: Таким же образом вы также можете использовать модульную спецификацию ES6.

3. Создайте файл webpack.config.js, чтобы упростить команду упаковки

(сопоставьте команду упаковки с входом и выходом упаковки.

Код в этом файле):

запись: Для упакованного

вывода записи: нам необходимо динамически получать путь в пакетном

• выводе выхода,
• чтобы мы могли использовать синтаксис Node.js для импорта модуля. Этот модуль представляет собой файл в кавычках пути (const path = require). («путь») Его необходимо найти в пакете узла.
• Используйте node.js через команду npm init (инициализация)
• , чтобы сгенерировать файл package.json (этот файл описывает информацию текущего проекта). Лицензия: «ISC» (с открытым исходным кодом для проекта), ниже приводится package.json.

Описание кода: если вы хотите использовать node, вы должны полагаться на файл package.json.

После запуска npm install [email protected] --save-dev зависимости добавляются следующим образом:

4. Сопоставление команд веб-пакета с запуском npm

Помимо сопоставления веб-пакета с входом и выходом , вы также можете сопоставить команды веб-пакета с запуском npm для некоторых операций (необходимо изменить в теге скрипта **"script"** в файле package. json). .

4. Использование загрузчика

1. Что такое загрузчик?

• Это основная концепция веб-пакета.

Теперь давайте подумаем, для чего используется веб-пакет?

• В основном мы используем веб-пакет для обработки кода js, и веб-пакет автоматически обрабатывает зависимости, связанные с js
• . Однако во время разработки он не только обрабатывается базовым кодом js, но также требует загрузки css, изображений и некоторого расширенного кода. конвертировать ES6 в ES5, конвертировать TypeScript в код ES5, конвертировать scss и less в css, конвертировать файлы .jsx, .vue в файлы js и т. д.
• Возможностями самого вебпака эти преобразования не поддерживаются.
• На данный момент достаточно расширить соответствующий загрузчик до вебпака.

2. Процесс использования загрузчика

1)

Подготовительные работы для обработки css-файла:

1. В каталоге src создайте css-файл. , создайте в нем файл Normal.css

2. Реорганизуйте структуру каталогов файла и поместите разбросанные js-файлы в папку js

3. Код в файлеnormal.css очень простой, то есть установите тело в красный цвет

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

5. На данный момент мы должны сослаться на него в файле main.js, входном файле.

После этого нам нужно импортировать соответствующий загрузчик для использования!

• Шаг 1. Установите нужный загрузчик через npm.
  (npm install --save-dev css-loader) (npm install --save-dev style-loader)
  На официальном сайте вебпака найдите следующий способ использования загрузчика стилей:
  
  

• Шаг 2. Создайте инструкции по настройке под ключевым словом модулей в файле webpack.config.js

: css-loader отвечает только за загрузку файлов CSS и не отвечает за встраивание определенных стилей CSS в документы.

На данный момент нам также нужен файл style-. загрузчик поможет нам обработать

Примечание. Style-loader необходимо размещать перед css-loader.

2) Шаг обработки меньшего файла

• 1 : Установите соответствующий загрузчик (примечание: здесь также установлен less, поскольку веб-пакет будет использовать less для компиляции меньшего файла). Команда: npm install --save-dev less-loader less

• Шаг 2. Измените соответствующий файл конфигурации (в webpack.config.js) и добавьте параметр правил для обработки файлов .less. следующее:

3) Обработка файла изображения

• . Шаг 1. Добавьте в проект два изображения (одно меньше 8 КБ, другое больше 8 КБ).

• Шаг 2. Сначала рассмотрите возможность ссылки на изображение в стиле CSS, как показано ниже.

  

• Шаг 3. Измените соответствующий файл конфигурации (в webpack.config.js) и добавьте параметр правил для обработки файлов изображений. следующее:

  

• Шаг 4 : После упаковки обнаружена ошибка, так как изображения размером более 8кб будут обрабатываться через file-loader , а в нашем проекте файлового загрузчика нет. (Вам необходимо установить file-loader , командой npm install --save-dev file-loader. После установки и упаковки вы обнаружите, что в папке dist есть дополнительный файл образа.

  

Описание:

• Обнаружено, что веб-пакет автоматически генерирует для нас очень длинное имя

  1. Это 32-битное хэш-значение для предотвращения дублирования имен.
  2. Однако в реальной разработке могут быть определенные требования к имени упакованного образа

• . Поэтому в настройках мы можем добавить следующие параметры:

  1. img: папка, в которую должен быть упакован файл.
  2. имя: получите оригинальное название изображения и поместите его в это место.
  3. Хэш8: во избежание конфликтов имен изображений по-прежнему используется хэш, но сохраняется только 8 бит.
  4. ext: используйте исходное расширение изображения следующим образом:
  

• Вам также необходимо позже настроить и изменить путь, используемый изображением

  . 1. По умолчанию веб-пакет вернет пользователю сгенерированный путь.
  2. Однако вся программа упакована в папку dist, поэтому здесь нужно добавить в путь еще один dist/.
  следующее:
  

Вкратце, после упаковки файл образа выглядит так

4), от ES6 до ES5

5. Настройте Vue в веб-пакете.

• Шаг 1. Команда выполнения терминала (npm install --save vue).

• Шаг 2. Импортируйте Vue в main.js (импортируйте Vue из «vue») следующим образом.

• Шаг 3. Повесьте p на экземпляр vue в index.html следующим образом:

• Шаг 4. После упаковки обнаружена ошибка. Нам нужно указать, что используемая нами версия vue — это версия компилятора времени выполнения .

Конкретные операции: вам нужно добавить разрешение в веб-пакет и взять псевдоним ( alias ), как показано ниже:

6. Использование Vue в веб-пакете.

Шаг 1. Повесьте p на экземпляр vue в index.html.

Шаг 2. Импортируйте компонент APP в файл main.js , зарегистрируйте приложение в экземпляре Vue и используйте компонент APP в шаблоне Vue ( компонентизация ).

Шаг 3. Создайте файл APP.vue и отделите шаблон страницы vue от кода js и кода css , как показано ниже.

Шаг 4. Настройте соответствующий загрузчик vue.

Измените файл конфигурации webpack.config.js:

7. Использование плагина

1. Понимание плагина

• Что такое плагин?
  1. Плагин означает плагин, который обычно используется для расширения существующей архитектуры.
  2. Плагины в вебпаке — это различные расширения существующих функций вебпака, таких как оптимизация упаковки, сжатие файлов и т.д.
• Разница между загрузчиком и плагином
  1. Загрузчик в основном используется для конвертации определенных типов модулей. Это конвертер.
  2. Плагин — это плагин, который является расширением самого веб-пакета и
• процесса использования плагина-расширителя.
  1. Шаг 1: Установка через npm требует использования плагинов (некоторые плагины, уже встроенные в вебпак, устанавливать не нужно)
  2. Шаг 2. Настройте подключаемые модули в файле webpack.config.js.

2. Webpack — добавьте информацию об авторских правах. Использование плагина.

3. Пакет HTML-плагина

4. Плагин сжатия js

8. Создайте локальный сервер

• . Webpack предоставляет дополнительный локальный сервер разработки . Этот локальный сервер построен на основе node.js и внутри использует экспресс-инфраструктуру. Он позволяет браузеру автоматически обновляться и отображать измененные результаты. .

• Однако это отдельный модуль. Его необходимо установить перед использованием в webpck. Команда: (npm install --save-dev [email protected])

• devserver также является опцией в webpack . можно установить следующим образом:
  1. contentBase: какая папка предоставляет локальные службы. По умолчанию это корневая папка. Здесь нужно указать ./dist.
  2. порт: номер порта
  3. встроенный: обновление страницы в реальном времени.
  4. HistoryApiFallback: на странице SPA

• конфигурация файла webpack.config.js режима истории, основанная на HTML5, изменяется следующим образом:
  

• Параметр –open означает прямое открытие браузера.

Кроме того,

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

9. Vue CLI

1. Что означает CLI?

• Это интерфейс командной строки, который переводится как интерфейс командной строки, но широко известен как scaffolding.
• Vue CLI — это официально выпущенный scaffolding проекта vue.js.
• Используя vue-cli, вы можете быстро создать среду разработки Vue и соответствующую конфигурацию веб-пакета

. Предварительные условия для использования Vue CLI — Node (необходимо установить Node).

Однако для использования Node необходимо использовать npm .

Что такое NPM?

• Полное название NPM — Node Package Manager
• , который является инструментом управления и распространения пакетов NodeJS. Он стал неофициальным стандартом для публикации модулей (пакетов) Node
• . NPM часто используется для установки некоторых зависимых пакетов в процессе разработки.

3. Используйте Vue CLI для

• установки каркаса Vue

npm install -g @vue/cli

• инициализация

невозможна.

• проект Vue CLI2

vue init webpack my -project