Extending webpack configuration

wpackio depends on webpack to create the dev server and production build. It does provide a way to extend and override webpack configuration it creates. Since wpackio can operate in both single and multi compiler mode, we provide method to extend webpack configuration for each of the webpack comp…

Read More

Make Customizer and REST API Work with development server

Due to reverse proxy nature of browser-sync, some things like WordPress Customizer and REST API may not behave correctly when opened from the proxy URL. This happens during development time only and has no side-effect on your production server. To fix it, add the following snippet in wp-conten…

Read More

Minimize CSS files with cssnano

wpack.io uses postcss-loader and thereby PostCSS . So we can take advantage of it to minify our CSS/SASS files during production builds. NOTE - wpackio-scripts only extracts CSS/SASS, doesn’t minify it. It is purposefully kept in the user-land because there are other options than cssnano. Insta…

Read More

Adding Typescript to your project

@wpackio/scripts has first-class support for both typescript and flow type . While flow works right out of the box there are some configuration needed for typescript. Provided tooling @wpackio/scripts comes with the build tooling for typescript, not typescript and webpack plugins. Also note th…

Read More

Using React Hot Loader with wpack.io

Let’s focus on an example where we use the great react hot loader to have the best in class DX when developing react app. It can be found in action under examples/plugin of the repo. Installation First install the dependency Modify wpackio project config From the documentation of react hot load…

Read More

Using various SVG Loaders

SVGs are all the rage in today’s web. There are may ways, especially with webpack, to consume SVGs, that I felt, it is best to leave it to the user-land to decide which method to pick. Each of them has their purpose and depending on your project, you should decide which method (or combination of me…

Read More

Manually add node dependencies

If for some reason, you don’t want to use @wpackio/cli to bootstrap dependencies, then we have you covered too. First add the dependencies. NOTE : It needs to go into your project’s dependencies , not in devDepencencies . The reason is, it provides an entry-point (automatically inserted for you…

Read More

Level up your JavaScript (Front-End) Skills

I created this tool in the hope that it will bring more WordPress developers to this crazy moving front-end world (crazy in all good way). With the tooling out of the way, you can actually focus on what matters, writing code. Here’s a list of tutorials and websites (some free and some paid, but I d…

Read More