Quickly start using Webpack Monitor with Laravel Mix

Webpack is the third build tool that I have used in the last 2-3 years. It’s inevitable that you will come across build tools. For small quick and dirty projects I still use Code Kit, But for those larger and more complex sites, I like to use Laravel Mix. It seemed to offer the most direct/less fuss solution for modern JavaScript, SCSS, and versioning.

With build tools, it’s sometimes hard to know what you are packing up to ship. Requiring one script could have a hand full of dependencies you didn’t expect to include.

“Webpack Monitor is a configurable Webpack plugin that captures relevant statistics on your production builds, and an interactive analysis tool that helps developers better understand bundle composition and identify and prioritize optimization strategies.“

Configuring Webpack Monitor is dead simple. Extend the mix.webpackConfig and away you go.

const WebpackMonitor = require('webpack-monitor');

###

mix.webpackConfig({
    plugins: [
        new WebpackMonitor({
            capture: true,
            launch: true,
        }),
    ],
})