Javascript: NPM, Webpack and Babel

NODE.JS and NPM

Node.js is a javascript runtime build. Its package ecosystem npm is the largest ecosystem of open source libraries in the world. So first install Node.js and NPM.
Then in your project folder run npm init. Answer couple of questions, it will create package.json file in your project folder.

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "forkify project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "Jonas Schmedtmann",
  "license": "ISC",
}

Now we install webpack, webpack-cli and live-server. --save-dev means that it will be installed as development dependency. It will be listed under devDependencies in your package.json file (because it is used during development). As an example jquery would be installed only using --save as it is used during project is live.
Webpack is most commonly used asset bundler. It bundles all our javascript files into one file.

  npm install webpack --save-dev
  npm install webpack-cli --save-dev
  sudo npm install live-server --global

Here is how our project structure will look.

  dist
    --css
    --img
    --js
    index.html //(here we will include bundle.js)
  src
    --js
      --index.js
      --test.js
    index.html
  package.json
  webpack.config.js      

Create webpack.config.js in your project folder.

const path = require('path');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    }
}
   
   

We create index.js and test.js files to test if webpack will bundle then into one file.

index.js

//Global app controller
import num from './test';
console.log(`I imported ${num}`);

test.js

console.log(`Imported module`);
export default 23;

We can run webpack from cli with npm run dev (or npm run build which will be smaller as it is minimized), which will bundle our js files to one bundle.js file. dev is defined in package.json file.

Webpack Dev Server and Babel

With this previous setup, we must run npm run dev each time we make some change. To automatize this, we will use dev server, so changes will be reloaded automatically after each change. We will use webpack-dev-server for this. For copying index.html from src to dist folder automatically, we will use html-webpack-plugin. To transform code from ES6 or newer to ES5 we will use Babel. Some code cant be transformed (for example promises, because they just dont exist in older versions of javascripts), for that will be used babel-polyfill, which will just add that code and not transform it.

  npm install webpack-dev-server --save-dev
  npm install html-webpack-plugin --save-dev
  npm install babel-core babel-preset-env babel-loader --save-dev
  npm install babel-polyfill --save

This is how will look updated scripts part of package.json file. We added start script. We will then run npm run start, it will then run in the background and refresh each time we change files.

  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  }

This is how will look updated webpack.config.js also with babel installed. Babel is used to transform ES6 and later javascript code back to ES5 code, for compatibility with older browsers.

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

module.exports = {
    entry: ['babel-polyfill', './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'
                }
            }
        ]
    }
};

We must also create .babelrc file in app folder.

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

When i tested this, it runs to error Cannot find module '@babel/core'. I fixed this with following command.

npm install --save-dev @babel/core @babel/preset-env