PLATFORM

  • Tails

    Create websites with TailwindCSS

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

COMMUNITY
MORE

Sorry, this video is only available to Pro accounts.

Upgrade your account to get access to all content.

Webpack for Newbs

Created on May 1st, 2017

Tony Lea tnylea

It's very common now adays to use a build process when building out your application. And a build process is simply a computer process that performs tasks like minifying your CSS, concatenating your files into a single file, or even moving files from one folder to another.

A few of the more popular task runners and build processors are GulpJS or GruntJS. These tools have gained a lot of popularity over the years. And now there is a new contendor making it's way to the top which is Webpack.

So What is webpack?

Webpack is simply a "Module Bundler" that will help you optimize files for your web application. Some of the popular tasks include bundling all of your javascript files into one single js file, or bundling all of your CSS files into a single css file.

Making sure that your application has one main javascript or css file will optimize your workflow, help with page load speed, and it will make managing your assets much easier.

In this video we have 5 quick steps we will follow to help you gain a better understanding of webpack and how it works.

  1. Install Webpack
  2. Create Your First Bundler
  3. Create a Webpack Config
  4. Include 3rd-party Libraries
  5. Webpack Loaders & Loading CSS
share on facebook share on twitter share via email

Comments (0)

loading comments
let checkoutBtns = document.getElementsByClassName("checkout"); for( var i=0; i < checkoutBtns.length; i++ ){ if(checkoutBtns[i].dataset.redirect){ redirectAfterPurchase = checkoutBtns[i].dataset.redirect; } checkoutBtns[i].addEventListener('click', openCheckout, false); } function openCheckout(e) { let checkoutButton = e.currentTarget; let productCheckout = parseInt('593446'); if(checkoutButton.dataset.product){ productCheckout = checkoutButton.dataset.product; } let couponCheckout = ''; if(checkoutButton.dataset.coupon){ couponCheckout = checkoutButton.dataset.coupon; } Paddle.Checkout.open({ product: productCheckout, email: '', successCallback: "checkoutComplete", coupon: couponCheckout, }); } let updateBtns = document.getElementsByClassName("update-account"); for( var i=0; i < updateBtns.length; i++ ){ updateBtns[i].addEventListener('click', updateAccount, false); } function updateAccount(){ Paddle.Checkout.open({ override: this.dataset.url, successCallback: "updateCancelComplete", }); } let cancelBtns = document.getElementsByClassName("cancel-account"); for( var i=0; i < cancelBtns.length; i++ ){ cancelBtns[i].addEventListener('click', cancelAccount, false); } function cancelAccount(){ Paddle.Checkout.open({ override: this.dataset.url, successCallback: "cancelComplete", }); } -->