Node.js is installed on your local machine – open a terminal and type node -v and if it is installed correctly, the version number should be displayed.
Node Package Manager (NPM) is installed on your local machine – open a terminal and type npm -v to check, the version number should be displayed.
You have created a new project in PhpStorm
Step 1 – Press Alt+F12 to open the terminal window
Step 2 – Type npm init at the prompt to initialize the project. It will then start asking some questions:
Package name: your project name
Description: a few details about your project
Entry point: index.js
Test command: leave blank
Git repository: leave blank
Keywords: leave blank
Author: your name
Type yes at ‘is this ok?’
Step 3 – The npm init command will have now created a package.json file. Open it in the editor.
Step 4 – Install Webpack using npm install webpack –save-dev
This will have now installed Webpack and added it as a development dependency in the package.json file.
Step 11 – Create an index.html file in a src directory in the root directory
Step 12 – Create an index.js file in a js directory within the src directory
Add a line in the index.js file to log some text to the console to test the setup is working, e.g. console.log(‘This test works!’);
Step 13 – Run npm start in the terminal and the index.html page should open in the browser and, when inspecting the browser console, the message in step 12 should be visible. If you change the text in the index.js file and save the file, the browser should automatically update.
Step 14 – Open the terminal and run npm install babel-core babel-preset-env babel-loader –save-dev
Step 15 – Amend the webpack.config.js by adding the module for the loader under the plugins array