Install And Setup Webpack

Install Node.js

Node.js is required. It's recommended to install Node.js LTS.

The following command would install Node.js 6.x.

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -sudo apt-get install -y nodejs

Install webpack

We would do a local installation of webpack, so that it's easier to maintain/upgrade projects individually.

# create project directorymkdir hello-appcd hello-app# install latest version of webpack locallynpm init -y  # will generate package.json filenpm install --save-dev webpack  # will generate node_modules directory

Project directory structure

├── dist
│   ├── bundle.js
│   └── index.html
├── src
│   └── index.js
├── package.json
└── webpack.config.js

Create source files

Create a src directory to store all your source files.

mkdir srccd src

Create index.js in src directory with the following content.

console.log("hello");// Create hello divvar element = document.createElement('div');element.innerHTML = "Hello";document.body.appendChild(element);

Setup distribution folder

Create a dist directory at project root directory to store your distribution/deployment files.

cd ..  # return to hello-app directorymkdir distcd dist

Create index.html in dis directory with the following content.

<html>  <head>    <title>Hello</title>  </head>  <body>    <script src="bundle.js"></script>  </body></html>

Configration file

Create webpack.config.js at project root directory.

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

Build

Run the following command to build using the above configuration.

./node_modules/.bin/webpack

dist/bundle.js is generated.

Open dist/index.html in your browser to preview if the script run correctly with Hello div created.

Auto build and server preview

Enable webpack to watch for changes in source files and automatically build.

./node_modules/.bin/webpack --watch# Output: Webpack is watching the files…

Install webpack-dev-server(a simple webserver capable of live reloading) at project root directory.

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

Configure webpack.config.js to enable devServer.

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

Start the development web server.

./node_modules/.bin/webpack-dev-server --open# OuptutProject is running at http://localhost:8080/webpack output is served from /Content not from webpack is served from ./dist

Preview the page at http://localhost:8080/.

When you make any changes to the source file (e.g. src/index.js), the browser will auto reload the page and reflect the latest changes.

NPM scripts

If you dislike running command using ./node_modules/.bin/webpack command line, you can setup npm shorcuts.

Edit package.json at project root directory.

{  ...  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build": "webpack",    "watch": "webpack --watch",    "server": "webpack-dev-server --open"  },  ...}

You can then run the following npm commands instead of ./node_modules/.bin/webpack.

npm run buildnpm run watchnpm run server