Cacher is the code snippet organizer for pro developers

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.

Webpack

• 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

Installation

$ npm install webpack -g
$ npm install webpack-dev-server -g # for development server

Sample basic config:

//webpack.config.js
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')
}

devConfig.module.loaders.push(stripLoader);

module.exports = devConfig;

Then:

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

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