Basic webpack installation

Install webpack on Mac OS. In this note, only installing the webpack, without configuring it.

You can learn how to install a webpack on Symfony inside the Symfony note. It will also describe how to install a webpack outside of this framework.

First of all, Node.js and the npm package installer must be installed.

Install Webpack

We go to the directory where we want webpack to be. Here inside the webpack folder, run:

A typical configuration file will be created. package.json

Install the webpack

After that, webpack is written in package.json in devDependency. A folder will also appear. node_modules inside which there will be webpack modules.

Install CLI for webpack

Installation of additional modules

Examples of installing compass modules and sass handlers

Bug fixes

On Mac OS Catalina, an error may appear:

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{45: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

To fix it, remove xcode and reinstall.

Attention! Xcode will download again. Depending on the speed of the Internet, this can take from 5 or more minutes.

Xcode reinstallation commands on mac os

Now reinstall the webpack:

If everything went without problems, then this webpack is installed. But in order for it to work, you still need to configure it. And how to do it – a google search will help.