Getting Started - Guide

1. npm init

npm init

it will create package.json file. This file used to configure :

• all package dependencies(dev and prod), version
• script command, we want to run : npm run SCRIPT-COMMAND

2. install webpack

link : https://webpack.js.org/guides/getting-started

npm install webpack --save-dev
npm install webpack-cli --save-dev

• new devDependencies added to package.json file.

"devDependencies": {
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2"
  }

• and package-lock.json file created.
• folder node_modules created, contained all package-dependencies.
• add folder node_modules path to .gitignore file.

3. create the app dir structure

src/
	app.js
dist/
	index.html
	bundle.js

• app.js, has dependency to lodash an external libraries.
  • run npm install --save lodash
• bundle.js is autogenerated on the build process. app.js file will be transpiled the output will become this bundle.js.

4. Configure the webpack - add entrypoint and output

links :

• webpack entry
• webpack output

Add webpack.config.js file.

• Set the entrypoint to app.js.
• and the ouput to bundle.js

entry: './src/app.js',
output: {
	filename: 'bundle.js',
	path: path.resolve(__dirname, 'dist')
}

5. Configure the webpack - setting dev env

links :

• webpack development env guide
  • webpack-dev-server
  • dev-server configuration
• devtool, to setup the source map

Install webpack-dev-server

npm install --save-dev webpack-dev-server

Update webpack.config.js file, add dev-server configuration

devServer: {
	contentBase: path.join(__dirname, 'dist'),
	compress: true,
	port: 9000
},
devtool: 'inline-source-map'

This server can be accessed from http://localhost:9000

6. Add babel

babel ES2015 features transpiler.

Installation

npm install --save-dev babel-loader @babel/core

Update webpack.config.js file, add babel module

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

Create .babelrc configuration file.

To start, you can use the env preset, which enables transforms for ES2015+.

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

Then add this configuration to .babelrc

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

7. Add npm script

Update package.json, add scripts :

"build": "webpack --config webpack.config.js --mode=development",
"watch": "webpack --watch",
"start": "webpack-dev-server --open"

8. build then start

npm run build

will create dist/bundle.js file, add this file to .gitignore

npm run start

will open browser with this url http://localhost:9000

Every time you do the changes to app.js file, the build process will run then refresh the browser automatically.