Home | About

How To Setup Webpack 2

Webpack is module bundler for modern web applications.

Steps

  1. Create folder
  2. Install webpack
  3. Creating webpack config
  4. Run webpack
  5. Webpack development server
  6. Run development server
  7. Development & production env
  8. Sourcemap for development & production

Step 1 - Create a folder

Create a folder called webpack-2-setup and cd into it.

$ mkdir webpack-2-setup && cd webpack-2-setup

Step 2 - Install webpack

$ npm install --dev-save webpack@latest webpack-dev-server@latest

or do it via Yarn.

From now on, I will be using yarn to install our dependencies.

$ yarn add --dev webpack@latest webpack-dev-server@latest

Step 3 - Creating webpack config

Create a webpack.config.js file in the root of our directory and let’s write some configuration.

var webpack = require('webpack');

var config = {
  context: __dirname + '/src', // `__dirname` is root of project and `src` is source
  entry: {
    app: './app.js',
  },
  output: {
    path: __dirname + '/dist', // `dist` is the destination
    filename: 'bundle.js',
  },
};

module.exports = config;

Create src/ directory as well. Now lets add lodash to dependencies in package.json by.

$ yarn add --dev lodash

And create a file called app.js in src/ directory.

var _ = require('lodash');

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);

alert(other); // [1, 2, 3, [4]]

Step 4 - Run webpack

To run webpack in development mode, type the following in your terminal.

$ webpack

Screenshot for development mode.

bundle size: 544 KB

To run webpack in production mode, type the following in your terminal.

$ webpack -p

Screenshot for production mode.

bundle size: 72.3 KB

We need a local server to run our application. So let’s setup a development server.

Step 5 - Setup webpack development server

Webpack has its own development server. Let’s add it to the webpack.config.js configuration.

var config = {
  devServer: {
    contentBase: __dirname + '/src', // `__dirname` is root of the project
  }
}

And add the script bundle.js file in src/index.html like below.

<!DOCTYPE html>
<html>
<head>
  <title>Webpack 2 Setup</title>
</head>
<body>

  <!-- bundler script file -->
  <script src="/bundle.js"></script>
</body>
</html>

Step 6 - Run development server

$ webpack-dev-server

Open http://localhost:8080 in your browser.

Screenshot for development server running in browser.

More configuration details on webpack-dev-server. That’s all, the basic webpack configuration is done.

But what about ES6 support? How to setup that? Let us see.

Loaders

A Loader is a task in webpack, which allows to require() CSS files in javascript or convert an image into data-URLs etc,

We are going to set up ES6 + Babel using a webpack babel loader.

Step 1 - Install babel loader & ES6 preset.

$ yarn add --dev babel-loader babel-core babel-preset-es2015

Now we have to add loader configurations to webpack.config.js file.

Step 2 - ES6 loader

module: {
  rules: [
    {
      test: /\.js$/, // Check for all js files
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader',
        options: { presets: ['es2015'] }
      }]
    }
  ]
}

Now, ES6 syntax is supported, let us check by changing app.js to ES6.

// importing lodash module
import _ from 'lodash';

const array = [1];
const other = _.concat(array, 2, [3], [[4]]);

alert(other); // [1, 2, 3, [4]]

Again run the development server and check.

$ webpack-dev-server

ES6 support is added greatly. But we need a way to debug bundle.js file for development since it will be bundled into a small file. So that means we have to add a sourcemap.

Before adding sourcemap, how do you tell which in mode webpack is running? So for that, we need to an environment for production and development.

Step 7 - Development & Production environment

In package.json file, let’s add scripts to run our dev server and production.

"scripts": {
  "start": "webpack-dev-server",
  "build": "NODE_ENV=production webpack -p --config webpack.config.js"
}

By setting NODE_ENV in the build script, we can access it in webpack.config.js and add configurations accordingly.

Step 8 - Sourcemap for development & production

Now we know when we are running for production or development. Let us use it to set up the sourcemap accordingly.

var config = {
  devtool: "eval-source-map" // Default development sourcemap
};

// Check if build is running in production mode, then change the sourcemap type
if (process.env.NODE_ENV === "production") {
  config.devtool = ""; // No sourcemap for production

  // Add more configuration for production here like
  // SASS & CSS loaders
  // Offline plugin
  // Etc,
}

module.exports = config;

More information on webpack’s sourcemaps.

Final

Below code contains all the configurations for the webpack from above steps.

var webpack = require('webpack');

var config = {
  context: __dirname + '/src', // `__dirname` is root of project and `src` is source

  entry: {
    app: './app.js',
  },

  output: {
    path: __dirname + '/dist', // `dist` is the destination
    filename: 'bundle.js'
  },

  //To run development server
  devServer: {
    contentBase: __dirname + '/src',
  },

  module: {
    rules: [
      {
        test: /\.js$/, // Check for all js files
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015'] }
        }]
      }
    ]
  },

  devtool: "eval-source-map" // Default development sourcemap
};

// Check if build is running in production mode, then change the sourcemap type
if (process.env.NODE_ENV === "production") {
  config.devtool = ""; // No sourcemap for production

  // Add more configuration for production here like
  // Uglify plugin
  // Offline plugin
  // Etc,
}

module.exports = config;

Articles References:

Thanks for reading my article.