In a previous post I explained how to work more easily with JavaScript projects thanks to the package @wordpress/scripts
. There is no doubt that thanks to this package and the command wp-scripts
that it includes, transpiling JavaScript is a child’s game.
Dealing with complex configurations of Webpack, Babel and other tools is something you don’t need to worry about anymore. But if your needs are more advanced and wp-scripts
falls short, don’t worry because its versatility allows you to expand its default possibilities using your own Webpack configuration file.
This, which may seem unnecessary when you are starting to develop with JavaScript for WordPress (and specifically for Gutenberg), is somewhat more common than you think. A simple example that will help you understand why you will have to use your own Webpack configuration is that by default wp-scripts
(the configuration of Webpack that it includes) does not allow you to work with SVG files in your JavaScript code.
Therefore, if you have a piece of JavaScript code as simple as the one you see below, where we render a component that draws an SVG image file, when using wp-scripts
to transpile the code you will get an error.
From here I encourage you to go through the documentation of wp-scripts
to see everything you can do with this utility. If you have done this, you will see that there is a section in which you’ll learn how to extend it to use your own Webpack configuration.
In order to work with SVG image files, what we do is use the package svg-react-loader
that allows us to import the SVG files as you see in the JavaScript component of the previous code. What we have done is to write the path to the SVG file icon.svg
and import it into the Icon
variable.
The name of the variable that the SVG file imports is not accidental. We use a name that starts with an uppercase character in order to use it directly in our JSX code as the regular component <Icon />
For this JavaScript code to work, the first thing we need to do is add the svg-react-loader
package as a dependency in our project using the following npm
command:
npm install svg-react-loader --save-dev
Once this is done, we just need to create the webpack.config.js
file in the root of our project, right in the same place where we have the package.json
file. If we put it there, the package @wordpress/scripts
will use it directly instead of the default configuration.
The content of webpack.config.js
is what you can see below:
If you look at the contents of the webpack.config.js
file, you will see that what we do is to use the values of the default configuration that is in the defaultConfig
variable, extending it when necessary with new configurations.
In this case, we modify the rules
section, where we added a new rule to process the files ending with .svg
using the package svg-react-loader
we installed earlier. This way, any SVG file we load behaves as a component that we can use in our JSX code to render SVG images extending wp-scripts
with our changes.
Note that this helps you extend the default configuration and process CSS files or anything else you can think of with Webpack. Tune your own webpack.config.js
file extending the one that comes by default with wp-scripts
and forget about everything else.
If you have any questions or use wp-scripts
in another way, you have no choice: leave us a comment! It’s nice to know that there are people on the other side…
Featured image by Kira auf der Heide on Unsplash.
Leave a Reply