How-to guide: Copying files using Webpack plugins

Published on August 16, 2018 by Jake

Posted in Technology


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.

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.

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