Understanding How Webpack Works

Webpack is a module bundler. It takes disparate dependencies, creates modules for them and bundles them into manageable output files. This is especially useful for Single Page Applications (SPAs), which is the defacto standard for Web Applications today

Initial Configuration

For start we need to tell Webpack our application entry and output points

     
    var path = require('path');
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, './dist/),
         filename: 'bundle.js
        }
    }

entry: This is the main entry point of our application. This is where our initial loading and application logic will be output.path: An absolute path for the resulting bundle. We use a built-in Node.js function (path) to dynamically create an absolute path, relative to where we are output.filename: The filename of the resulting bundle. This can be anything, but by convention it’s called bundle.js __dirname: This is the directory name of the current file.

Loaders

In most of the occasions our project source files are HTML, CSS , JS/TS. Webpack understands JavaScript from the box, but what about the other file types? Here are the most common Webpack loaders for this files types: TypeScript


     
    {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
    }

test: File type to look for. We provide a regex expression that will match .ts files loaders: The loader to use HTML


     
    {
        test: /\.html$/,
        use: 'raw-loader'
    }

test: File type to look for. We provide a regex expression that will match .html files use: The loader to use CSS


 
    {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
    }

test: File type to look for. We provide a regex expression that will match .css files loaders: The loaders to use. Webpack processes Loaders from right to left, so the results of css-loader (the file contents) are passed to style-loader (adding the styles to the HTML document) Important: In order to use this loaders we need to have their dependencies installed. For more info about loaders please visit Webpack Official Page

Plugins

They serve the purpose of doing anything else that a loader cannot do. Here is an example:


     
    plugins: [
        new webpack.ProgressPlugin(),
        new webpack.ContextReplacementPlugin(
            resourceRegExp,
            [newContentResource],
            [newContentRecursive],
            [newContentRegExp]
        )      
    ]

ProgressPlugin: This plugin extracts progress information ContextReplacementPlugin: If the resource (directory) matches resourceRegExp, the plugin replaces the default resource, recursive flag or regExp generated by parsing with newContentResource, newContentRecursive or newContextRegExp respectively. If newContentResource is relative, it is resolve relative to the previous resource For more info about plugins please visit Webpack Official Page

Resolve

Here you can change how modules are resolved. Webpack provides reasonable defaults, but it is possible to change the resolving in detail. Example:

    
    resolve: {
        extensions: ['.ts', '.js']
    }

This automatically resolves certain extensions which is what enables users to leave off the extension when importing:

 
    import File from '../path/to/file'

For more info about resolve please visit Webpack Official Page

Full Example


    'use strict';
    let path = require('path');
    let webpack = require('webpack');
 
    module.exports = {
        entry: './app/main.ts',
 
        output: {
            path: path.resolve(__dirname + '/dist'),
            filename: 'bundle.js'
        },
 
        module: {
            loaders:
            [
                {
                    test: /\.ts$/,
                    loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true']
                },
                {
                    test: /\.htm$/,
                    use: 'raw-loader'
                },
                {
                    test: /\.css$/,
                    loaders: ['style-loader', 'css-loader']
                }
            ]
        },
 
        plugins: [
            new webpack.ProgressPlugin(),
            new webpack.ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)@angular/,
                path.join(process.cwd(), 'app')
            )
        ],
 
        resolve: {
            extensions: ['.ts', '.js']
        }
    };

Blogs