Webpack configs

package.json

{
  "name": "chapter-19",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "node_modules/.bin/webpack --mode production",
    "serve": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/assets/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

webpack.sh

# create 'webpack.config.js' in root dir

#install webpack and cli as dev dependencies
npm i webpack webpack-cli -D

# run webpack
node_modules/.bin/webpack
#or below after creating a script in package.json 
npm run webpack 

# install webpack dev server 
npm i webpack-dev-server

# install babel-loader to use babel to convert js to compatible code for older browsers 
npm install babel-loader -D