How to Setup Webpack and Babel using PhpStorm

Webpack is a commonly used asset bundler for modern JavaScript development. Babel is a tool which takes JavaScript ES6 code and converts it to JavaScript ES5 so your code is compatible with older browsers. This tutorial will show you how to set up Webpack and Babel in the PhpStorm IDE.

Prerequisites

  1. 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.
  2. 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.
  3. You have created a new project in PhpStorm

Installing Webpack

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
  • Version: 1.0.0
  • 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
  • License: ISC
  • 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 5 – Install Webpack CLI using npm install webpack-cli –save-dev

Step 6 – Install Webpack DevServer using npm install webpack-dev-server –save-dev

Step 7 – Install Webpack Plugins using npm install webpack-plugin –save-dev

Step 8 – Create a file in the project root directory called webpack.config.js

Step 9 – Open the webpack.config.js file in the editor and enter:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ]
};

Step 10 – Open the package.json file which will have been created by npm init and enter the “scripts” object for dev, build and start.

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "webpack test",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
  }
}

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

How to Setup Webpack and Babel using PHPStorm
Files and directories

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.

Installing Babel

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

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
};

Step 16 – Create a .babelrc file in the project root directory and enter the following:

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "last 5 versions",
            "ie >= 8"
          ]
        }
      }
    ]
  ]
}

Step 17 – Open the terminal and run npm install babel-polyfill –save

Step 18 – Add to the entry point as an array in the webpack.config.js file under module.exports = {

entry: ['babel-polyfill', './src/js/index.js'],

You have now set up webpack and babel in PhpStorm!