@wordpress/scripts. There is no doubt that thanks to this package and the command
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.
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
icon.svg and import it into the
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
svg-react-loader package as a dependency in our project using the following
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