Building daycare website [Part 4]: Configure WebPack to build a bundle for vendor assets

Let’s continue dissecting the auto-generated Aurelia project template by turning the attention to WebPack. As I mentioned in a previous post, the template includes a very cool WebPackMiddleware to load an execute WebPack within the ASP.NET Core pipeline, but it also includes files to configure WebPack with some best practices. This post analyzes the webpack.config.vendor.js, whose full contents are below:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');

module.exports = ({ prod } = {}) => {
    const isDevBuild = !prod;
    
    return [{
        stats: { modules: false },
        resolve: {
            extensions: ['.js']
        },
        module: {
            loaders: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
                { test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) }
            ]
        },
        entry: {
            vendor: [
                'aurelia-event-aggregator',
                'aurelia-fetch-client',
                'aurelia-framework',
                'aurelia-history-browser',
                'aurelia-logging-console',
                'aurelia-pal-browser',
                'aurelia-polyfills',
                'aurelia-route-recognizer',
                'aurelia-router',
                'aurelia-templating-binding',
                'aurelia-templating-resources',
                'aurelia-templating-router',
                'bootstrap',
                'bootstrap/dist/css/bootstrap.css',
                'jquery'
            ],
        },
        output: {
            path: path.join(__dirname, 'wwwroot', 'dist'),
            publicPath: '/dist/',
            filename: '[name].js',
            library: '[name]_[hash]',
        },
        plugins: [
            extractCSS,
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
        ])
    }]
};

• Line #6: The exported function is called by WebPack and it receives the command line arguments that where used. This is used to make small tweaks depending if the project is building for Debug or Release purposes.
• Line #11 automatically resolves the .js extension, which enables any import statement from omitting the extension.
• Line #14 declares two module loaders
• CSS files gets their contents extracted by the ExtractTextPlugin, the contents run through the css-loader and the result written to a vendor.css file. Notice that depending if WebPack is running on development or production mode, the CSS contents will be minimzed.
• Images are configured to use the url loader, so if the image is large it emits the file to the output directory and creates links to it, if the image is small it can inline the content on the link.
• Line #20 creates a single bundle called ‘vendor’ which includes all the aurelia modules, plus bootstrap and jQuery. Nothing special here other than it having to manually reference the .css file inside the bootstrap module so that it is picked up by the css loader.
• Line #39 defines the output directory as the ‘wwwroot/dist’ folder, so all assets will end up there.
• Line #45 declares the plugins that are used:
• Obviously we need to include ExtractTextPlugin that we defined for the css files.
• Next comes a ProvidePlugin, which enables any module from using the global variables ‘$’ or ‘jQuery’. Behind the scenes, WebPack will automatically load the jQuery module and set the global variables to the module’s export.
• Then comes an interesting one called DllPlugin.  This is a performance improvement, since the vendor bundle will rarely change, it allows WebPack to compile it once and then just reference the compiled version with each run instead of having to rebuild it. This plugin creates a manifest file that can be used by other webpack configurations to ‘reference’ this pre-compiled bundle.
• Lastly, if WebPack is being run for production, it will add an optimization plugin to minify and compress the javascript bundles.

That’s it, to see the build in action you can install WebPack globally from NPM and run:

webpack --config webpack.config.vendor.js

You can visit the live demo or browse the sources at the project page.