Getting started ES2015 with Webpack

Goal

Create a ES2015 project with Webpack

Step 1: Add package.json file and initialize it

yarn init -y

Step 2: Add webpack

Add webpack modules follow

  • webpack
  • webpack-cli
  • webpack-dev-server

yarn add webpack webpack-cli webpack-dev-server -D

Step 3: Add scripts to package.json file

1
2
3
4
5
6
7
// package.json

...
"scripts": {
    "start": "webpack-dev-server --hot --inline --watch-content-base --content-base dist/ --open-page index.html"
}
...

Step 4: Add ES2015

Add babel dev moduels follow

  • @babel/core
  • @babel/polyfill
  • @babel/preset-env

yarn add -D @babel/core @babel/polyfill @babel/preset-env

Create .babelrc file

1
2
3
4
5
// .babelrc

{
    "presets": ["@babel/preset-env"]
}

Step 5: Add src directory then add index.js and helper.js files

1
2
3
4
5
// index.js

import { log } from "./helper";

log("Hello World");
1
2
3
// helper.js

export const log = msg => console.log(msg);

Step 6: Create dist directory and add index.html file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script src="./main.js"></script>
  </body>
</html>

hello-es2015

Step 7: Run scripts

yarn start

*This project can be found;

References