πŸ”§ βš™ Tutorial to setup webpack 2 from scratch.
Branch: master
Clone or download
Latest commit 89cec94 Aug 8, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Nov 3, 2016
LICENSE Initial commit Nov 3, 2016
README.md fix output name Aug 7, 2017
logo.png Adding logo Nov 3, 2016
logo.svg Updated readme with babel-loader fixes May 4, 2017
webpack-p.png Initial commit πŸŽ‰ Nov 3, 2016
webpack.png Initial commit πŸŽ‰ Nov 3, 2016

README.md

How To Setup Webpack 2

Simple tutorial on how to setup webpack v2.

Read my blog post on how to setup webpack 2

Table of content

  1. Create folder
  2. Install webpack
  3. Write webpack config
  4. Run the webpack
  5. Setup webpack development server
  6. Run development server
  7. Setup development & production env
  8. Sourcemap for development & production

Setup & Installation

Step 1 - Create folder

First let's create a directory called webpack-2-demo and initialize npm:

$ mkdir webpack-2-demo && cd webpack-2-demo
$ npm init -y

Step 2 - Install webpack

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

or do it via Yarn

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

Step 3 - Write webpack config

Create a webpack.config.js in 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
    publicPath: "/assets/",
    filename: 'bundle.js',
  },
};

module.exports = config;

Now lets add lodash to dependencies in package.json by.

$ yarn add --dev lodash

And let's write some code in src/app.js

var _ = require('lodash');

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

console.log(other); //[1, 2, 3, [4]]

Step 4 - Run the webpack

To run webpack in development mode.

$ webpack

Screenshot of development server

Total Size: 208KB

or run webpack in production mode.

$ webpack -p
  • p is for production which uglifies and minifies files.

Screenshot of development server

Total Size: 38KB

Step 5 - Setup webpack development server

Webpack has its own development server. Lets setup that in webpack.config.js by adding the following.

devServer: {
  open: true, // to open the local server in browser
  contentBase: __dirname + '/src',
},

And add the script for bundle.js in src/index.html.

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

  <script src="/assets/bundle.js"></script>
</body>
</html>

Step 6 - Run development server

Run development server.

$ webpack-dev-server

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

Thats all basic webpack config is done. But what about SASS, IMAGES, ES6 loaders ? How to setup that ? Lets see.

Loaders

Lets set up ES6 + Babel using a webpack loader.

Step 1 - Install babel loader,core & ES6 preset.

$ npm install --save-dev babel-loader babel-core babel-preset-es2015

After installation, We have to add config to webpack.config.js file.

Step 2 - ES6 Loader

module: {
  rules: [
    {
      test: /\.js$/, //Check for all js files
      loader: 'babel-loader',
      query: {
        presets: [ "babel-preset-es2015" ].map(require.resolve)
      }
    }
  ]
}

In order to check babel loader, we will change app.js to ES6 syntax.

'use strict';

import _ from 'lodash'; //ES6 import to check our babel loader

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

console.log(other); //[1, 2, 3, [4]]

Run the development server and check the console.

$ webpack-dev-server

Step 3 - SASS & CSS Loader

Install SASS & CSS Loader

$ npm install --save-dev css-loader style-loader sass-loader node-sass

SASS & CSS loader config for webpack is below.

module: {
  rules: [{
    test: /\.(sass|scss)$/, //Check for sass or scss file names
    use: [
      'style-loader',
      'css-loader',
      'sass-loader',
    ]
  }]
}

After loaders, final steps are setting up sourcemaps and env for webpack.

Step 7 - Setup Dev & Prod Environment

In package.json file, lets add scripts to run our dev server and build with env.

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

NODE_ENV=production is environment set for build. Using process.env.NODE_ENV, we can check the env in webpack.

Step 8 - Sourcemap for Dev & Prod

Now we know when we are running production build or development. Lets use it to setup 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 = "source-map";
}

module.exports = config;

More information on sourcemaps

Final

Final step contains all the config for webpack from above.

'use strict';
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',
    publicPath: "/assets",
  },
  module: {
    rules: [
      {
        test: /\.js$/, //Check for all js files
        loader: 'babel-loader',
        query: {
          presets: [ "babel-preset-es2015" ].map(require.resolve)
        }
      },
      {
        test: /\.(sass|scss)$/, //Check for sass or scss file names
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      },
      {
        test: /\.json$/,
        loader: "json-loader"  //JSON loader
      }
    ]
  },
  //To run development server
  devServer: {
    contentBase: __dirname + '/src',
  },

  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 = "source-map";

  // Can do more here
  // JSUglify plugin
  // Offline plugin
  // Bundle styles seperatly using plugins etc,
}

module.exports = config;

Thats all. Thanks for reading my repo.

Articles