• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
  • Login
Home ยป Webpack

Webpack

Compile SASS and build JS with Webpack

If You’ve tried SASS before You don’t want to write a single line of CSS anymore. Webpack is an awesome tool that builds and minify the JavaScipt and CSS files.

How to use Webpack with SASS Loader?

Open the terminal at the project folder

Step 1 – Initialize package.json

npm init -y

Step 2 – Install the following packages:

  • Webpack
  • Webpack-CLI
  • Sass Loader
  • Node Sass
npm install --save-dev webpack webpack-cli sass-loader node-sass

Your package.json going to be look like this

It is going to be generated, so You don’t need to copy the content.

Step 3 – Create a file named webpack.config.js

Step 4 – Run webpack and watch for changes

npx webpack --watch

Filed Under: Free Tagged With: Webpack

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2023 WP Flames - All Right Reserved