Configure Webpack 5 in Wordpress (2023) with Typescript and SASS

I'll walk you through setting up Webpack 5 for your project in WordPress. This video allows you to understand how to use Webpack 5 inside WordPress and configure it with SASS and Typescript.

Configuring Webpack 5 in WordPress will help you to set up Webpack 5 in your Wordpress project.

The article will go through the installation process of Webpack 5 and how to configure I with Sass and Typescriptt. You will also learn how to set up a computer for SASS and Typescript, which is a superset of JavaScript.

You may already be aware of Webpack's ability to compile all of your modules and dependencies into a single file, which you can then add to your project for a variety of reasons that are covered in the video above.

# ----------------------------------------------------------------------------------------------------
⏰ Timestamps
0:00 Intro
2:22 Create an instance on local
5:10 Clone and clean up the boilerplate
20:10 NPM scripts and development mode
23:30 Webpack input files
27:49 Run the build scripts
19:55 Webpack output files
33:25 Add images to Webpack
40:20 Clean assets before build
41:50 Modularize SASS files
43:45 Source map for your assets
45:20 Add a watcher to scripts
48:00 Enqueue the assets in your theme
56:20 Conclusion

[kamilp]

Thanks for this video, it helps a lot with working on my first plugin. You should definitely create more content focused on WordPress. There is a lack of good teachers in this area on YouTube.

[pellax]

Best video about the subject I've ever found. Muchas gracias, ojalá y hayan más vídeos así.

[anirudhachakrabarty]

Just awesome video... But how can I make the pipeline to reflect the changes in the live server.. how to deploy this one? Can you make a video on that? This will be super awesome.... ❤

[kevinrittershaus]

THIS WAS AWESOME! Thank you. 2 questions. How can we add browser reload? Is there a way to zip the file when the theme is built? Yes, I'm a noob to webpack.

[christianoCROfficial]

Just finished this now.. I must say it was worth it. Learned a lot of new things.

Thanks Alejandro 😇

[ravimakwana]

Thank you so much for this video. Can you make video about the how to purge Bootstrap/TailwindCSS while creating website? thank you in advance.

[maryamrika]

Thanks Alejandro🙏. I was looking for this for ages. thanks for sharing. I just added browser-sync-webpack-plugin for auto reloading . Maybe i'm a auto reloading freak😝. Can you make a video about "Open the New Page Without Reloading or Refresh the Page ". Thanks a lot ❤❤❤💯💯💯

[Luchen]

Thanks for the content! It was pretty easy to follow and just enough information not to make it overwhelming. Would you mind sharing your VS code setup to work with PHP/Wordpress?

[ScottMackey]

Great video thanks. Suggest Vite for the packager nowadays, it's faster building and out-of-box come with a lot more without configuration. Wonder if with all browsers supporting ES6 now, is babel even needed?

[dramatrailerglobal]

I have watched your video in its entirety and gained a lot. WordPress loads style.css by default. Can your framework be optimized to directly generate style.css when generating main.css? This seems to be more in line with WordPress style.

[anthillca]

Ok holy shit. I've been looking for a vid like this for years. dude, you deserve much props. thx so much.