Using Webpack with WordPress has many advantages. The first and most obvious is the ability to create a single JS file that will serve your website’s entire JavaScript and CSS. In the process, Webpack also preprocesses your SASS or LESS if you are using those ( and you should), compiles your ES6 JavaScript and all sorts of awesome goodness. The end result is a faster website that hopefully loads instantly. The only problem is that Webpack is not the easiest to configure and was not intentionally built to work with WordPress. So here’s a quick guide to setting up Webpack with WordPress. First, you will need to use NPM in order to install Webpack and a few basic loaders. Webpack uses those to parse files that are not initially written in JS like CSS for example. Go to your console, navigate your way to the directory of your theme or child theme and type: npm init Press enter several times to quickly have the default settings apply to your project (you can change those later) and type: npm install --save webpack That should give you the ability to load numerous JavaScript files to your website in a single file, so let’s do that now. In your theme folder create a file
Share This