Два варианта:
- Установить глобально:
npm install -g webpack
При глобальной установке webpack можно запустить с помощью команды webpack из командной строки / окна терминала.
2. Установить локально в папку проекта:
npm install webpack --save-dev
При локальной установке вам нужно запустить webpack через npm script.
Запуск Webpack
Вариант 1. Использование команды webpack
Если webpack установлен глобально, вы можете использовать webpackкоманду на терминале, чтобы упаковать ваше приложение.
webpack ./src/scripts/app.js ./dist/app.bundle.js
Приведенная выше команда вызывает Webpack с двумя аргументами ниже:
Первый аргумент - ./src/scripts/app.js - это точка входа, с которой внутренний веб-пакет начнет строить свое дерево зависимостей модулей и запускать их объединение в один выходной файл.
И второй аргумент - ./dist/bundle.js - это окончательный выходной файл, который webpack создаст для вас после упаковки всего вашего js-кода и других зависимостей модуля.
Вариант 2. Использование сценария npm
Команду webpack также можно запустить через npm script. Если webpack установлен локально, вы должны использовать эту опцию.
Я бы использовал эту опцию на протяжении всего урока.
В package.json корневой папки вашего проекта добавьте раздел сценария и определите сценарий - start, как показано ниже:
Обратите внимание на раздел сценариев выше, где мы добавили сценарий с именем start, который запускает ту же команду webpack, которую мы запускали непосредственно в варианте 1.
Теперь запустите приведенный выше сценарий из терминала:
npm start
Это должно вызвать Webpack, который начнет объединять весь ваш код javascript, начиная с файла app.js, и создавать файл app.bundle.js, созданный в папке 'dist' (папка + имя файла, как указано вторым параметром) в вашем проекте. корневая директория.
Далее мы увидим, как настроить параметры веб-пакета с помощью webpack.config.js
