11/9/2016 - 5:07 PM

Webpack notes

Webpack notes

Webpack notes

Why build?

  • As front end development are becoming complex, we use many components, that means many js files. In order not to get browsers call for each js files, build combines all files to one single js file and one request from browser is sufficient in this way.
  • Code size (Minifying) - fetching smaller file is important
  • File order dependencies
  • Transpilation - Browsers currently runs ES5, in order to use ES6 features, a transpiler should be used.
  • Linting
Alternative Solutions
  • Server-Side Tools e.g. ASP.NET, Rails, etc.
  • Task Runners e.g. Grunt, Gulp, etc.


  • Specialized Task Runner
  • Optimized for a task: managing input and output files
  • Utilizes components: loaders
  • Combines css into the javascript
  • Uses NPM instead of Bower
  • Module system
$ npm install webpack -g
$ npm install webpack-dev-server -g # for development server
Sample basic config:
module.exports = {
    entry: ["./app.js","./utils.js"],
    output: {
        filename: "bundle.js"

    module : {
        preLoaders: [
                    test: /\.js$/, // include .js files
                    exclude: /node_modules/, // exclude any and all files in the node_modules folder
                    loader: "jshint-loader"
        loaders: [
                    test: /\.es6$/,    //only process es6 files in this loader
                    exclude: /node_modules/,  //except node_modules
                    loader: "babel-loader"  //name of the loader

    resolve: {
        extensions: ['','.js','.es6'] //resolve these files when requiring (default is only js)

For production builds: Add webpack-production.config.js

var WebpackStrip = require('strip-loader');
var devConfig = require('./webpack.config.js');

var stripLoader = {
    test: [/\.js$/, /\.es6$/],
    exclude: /node_modules/,
    loader: WebpackStrip.loader('console.log', 'perfLog')


module.exports = devConfig;


$ webpack --config webpack-production.config.js -p

After that, you can simply serve it, for example with http-server (npm package)