Install And Setup Webpack

August 10, 2017
Install Node.js and webpack, basic setup and auto build with preview.

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 directory
mkdir hello-app
cd hello-app

# install latest version of webpack locally
npm init -y  # will generate package.json file
npm 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 src
cd src

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

console.log("hello");

// Create hello div
var 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 directory
mkdir dist
cd 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
# Ouptut
Project 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 build
npm run watch
npm run server
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.