How-to guide: Copying files using Webpack plugins

Sometimes in the world of web development you have to work around some funny deployment issues and do things a bit manually.

An issue I recently encountered was trying to copy a single file into the build folder when using webpack to build and run the non-local environment.

After a quick Google (every developers first port of call) I found CopyWebpackPlugin which allows you to copy a single file into the build directory rather than bundling it.

https://gist.github.com/jakeboud/426aa5ecfd8f420297327f3b9ec773c0

Using this code snippet I was able to copy everything from the kendo folder into the build directory, as well as the Material folder into a sub folder, also called Material.

However this was not the end of the process, as the Kendo files needed to be included in the template.html as scripts and stylesheets. The tags could not be added manually as the files sat in different places for the build and local development running of the app.

Luckily another plugin, HtmlWebpackIncludeAssetsPlugin, came to the rescue.

This allowed for the script and stylesheets to be inserted into the template.html on both build and the local development for the relevant file locations for both ways.

https://gist.github.com/jakeboud/7c7abe968a7b7cabc98683a07e4ef5a2

So, if you ever need to specifically include some files in the build without them being bundled with the rest of your code, these two plugins are a great way to do it.

Originally posted on GitHub

Photo by rawpixel on Unsplash

Leave a Reply

Your email address will not be published. Required fields are marked *

More to Explore