Webpack in Wordpress
Webpack is a powerful tool nowadays in front end development, So i decided to use in my project which was using Wordpress and Woo commerce.
Wordpress is not using webpack, I thought it will be good idea to use Webpack but the question was why to use Webpack and what will be the advantages of using it?
The answer was simple for me, just TRY and LEARN something new.
In this process to implement “Webpack”, I defined a set of entry point called “vendor, critical, home, search, product, cart, account and checkout”.
I created multiple entry point, which output the processed file in “dist” folder.
In the “dist” folder, we can see a set of “JS” and “CSS” file for each entry point. So I had a separate “JS” and “CSS” for each pages. So let see, How i maintained to do this?
Lets take “Cart” page and try to understand how i manage to create a separate “JS” and “CSS” file.
I solved this problem with the use of “assets-webpack-plugin” webpack plugin.
This plug-in outputs a json file with the paths of the generated assets.
finally i used this below Wordpress function, load_style and load_script function. Both the function, gets the “webpack-assets.json” and create link and script tags for specific pages/template.
Hope this will be helpful for those using Wordpress.