веб-пакет основан на node.js. Webpack — это статический инструмент упаковки модулей для современных приложений JavaScript. Он разработан на основе node.js. При его использовании требуется поддержка компонента node.js. Его необходимо установить с помощью npm или cnpm, синтаксис — «cnpm install webpack». -г".
Операционная среда этого руководства: система Windows 7, nodejs версии 16, компьютер DELL G3.
Webpack — это инструмент компиляции кода с входом, выходом, загрузчиком и плагинами. webpack — это статический инструмент для объединения модулей для современных приложений JavaScript. Он выполнит статический анализ на основе зависимостей модулей, а затем сгенерирует соответствующие статические ресурсы для этих модулей в соответствии с заданными правилами.
Когда веб-пакет обрабатывает приложение, он внутренне создает граф зависимостей, который сопоставляется с каждым модулем, необходимым проекту, и генерирует один или несколько пакетов.
Webpack — это интерфейсный инструмент для упаковки, разработанный на основе node.js. При его использовании требуется поддержка компонента node.js.
Установка Webpack
① Работа Webpack зависит от Node.js, поэтому сначала необходимо установить Node.js.
После завершения установки введите следующие две строки команд в окне командной строки. Если появится номер версии, установка прошла успешно.
$ node -v$ npm -v
② Затем вы можете установить Webpack через npm (инструмент управления пакетами на основе Node.js).
Поскольку источник npm находится за границей, скорость установки может быть низкой. Рекомендуется использовать зеркало npm cnpm от Taobao. Но следует отметить, что некоторые пакеты в cnpm будут отличаться (вообще говоря, это не влияет на использование.
Вы можете завершить настройку cnpm с помощью следующей строки кода:
$ npm install -g cnpm --registry=https). ://registry .npm.taobao.org
Используйте cnpm для установки веб-пакета:
cnpm install webpack -g
Создайте проект
Далее мы создаем каталог приложения:
mkdir app
Добавьте файл runoob1.js в каталог приложения, код следующий:
Файл app/runoob1.js
document.write («Это работает.»);
Добавьте файл index.html в каталог приложения, код следующий:
файл app/index.html
<html>
<голова>
<мета-кодировка="utf-8">
</голова>
<тело>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</тело>
</html> Далее мы используем команду webpack для упаковки:
webpack runoob1.js Bundle.js.
Выполнение приведенной выше команды скомпилирует файл runoob1.js и создаст файл Bundle.js. После успеха выходная информация будет следующей:
Хэш. : a41c6217554e666594cb
Версия: вебпак 1.12.13
Время: 50 мс
Размер кусков активов Имена кусков
Bundle.js 1,42 КБ 0 [испущено] main
[0] ./runoob1.js 29 байт {0} [встроено] Откройте index.html в браузере, результаты будут следующими:
