Базовая установка webpack

Устанавливаем webpack на Mac OS. В этой заметке только установка вебпака, без его настройки.

Как устанавливать вебпак на Symfony можно узнать внутри заметки о Symfony. Здесь же будет описан способ установки вебпака вне этого фреймворка.

Прежде всего должен быть установлен Node.js и установщик пакетов npm.

Устанавливаем Webpack

Переходим в директорию, где хотим чтобы находился webpack. Здесь внутри папки webpack запускаем:

npm init

Будет создан типовой конфигурационный файл package.json

Устанавливаем вебпак

npm install --save-dev webpack

После этого в package.json в devDependency пропишется webpack. Также появится папка node_modules внутри которой будут модули вебпак.

Установим CLI для вебпака

npm install --save-dev webpack-cli

Установка дополнительных модулей

Примеры установки модулей compass и обработчиков sass

npm install --save-dev sass-loader
npm install --save-dev css-loader
npm install --save-dev compass

Исправляем ошибки

На Mac OS Catalina может появится ошибка:

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack at ChildProcess.emit (events.js:198:13)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Darwin 19.2.0
gyp ERR! command «/usr/local/bin/node» «/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js» «rebuild»
gyp ERR! cwd /Users/Dream/Sites/justdone.me/wp-content/plugins/justdone/node_modules/fsevents
gyp ERR! node -v v10.16.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 install: `node-gyp rebuild`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

Для исправления удалим xcode и заново устанавливаем.

Внимание! Xcode будет скачиваться заново. В зависимости от скорости интернета на это может уйти от 5 и больше минут.

Команды по переустановки xcode на Mac OS

sudo rm -rf $(xcode-select -print-path)
xcode-select --install
/usr/sbin/pkgutil --packages | grep CL
sudo npm install -g node-gyp

Теперь заново устанавливаем вебпак:

npm install --save-dev webpack

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

Метки:

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи: "Базовая установка webpack"
Если вам нужно добавить участок кода ставьте его между тегами <code></code>