Using Webpack to Copy Static Files to your Build Folder

This article is relevant for: 
- node 5.8.0
- npm 3.7.3
it may or may not work for other versions.


I've recently started doing a lot of work with React and React Native. I created a React Native Starter kit  that uses webpack as the Module loader. I actually use Grunt and the "grunt-webpack" plugin but the build process uses webpack to bundle my distribution (production build).

I am fairly new to webpack so last week I hit a roadblock. I wanted to include a link to a "apple-touch-icon" static image on my app homepage so that a user can add a "shortcut" icon on their iOS device home screen. Basically I wanted to "Appify" my React App like so:

I wanted to reference this image in my homepage so that I can Appify my React App on iOS

If you have not done this before with your web apps, it's very easy to do. Basically you just create a link tag like so and put it on your homepage:

<link rel="apple-touch-icon" href="/assets/lifeletters-app-logo.png">

You will also need to add the following tags as well:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Like so:

I put this simple link tag to reference the iOS app icon image

So basically when I hit my "build" task webpack bundles all included resources (js, images, css etc) and puts it into a "dist" folder which I then deploy as my app build. But I needed webpack to pick up the "company-webapp-logo.png" and copy it to the "dist" folder as well so my "dist" folder looks like this:

I needed my "dist" folder to look like this

Unfortunately webpack only infers my JavaScript code and copies resources it finds there. I needed a way to copy "static"files over to my build folder as well. A task like this is veryeasy to do in a system like Grunt, but I wanted to stick to webpack as eventually I want to move away from Grunt.

I tried multiple webpack loaders like the webpack file loader but I could not get a simple copy to work. (with the file loader I managed to get the PNG image moved but the image got corrupted)

After more digging around I cam across the copy-webpack-plugin so I gave it a go.

And Bingo! I got the job done.

It's basically a very basic plugin to copy static file/folders to your build destination. Here is how you would configure it in your webpack config file.

Here is how you configure the copy-webpack-plugin plugin in your webpack config file

Initially I had my doubts that it would work as I was using the Grunt webpack module, but it still did.

I use webpack as part of a Grunt workflow like so...

This is a very basic workflow example but hopefully it will help some new starters to webpack.

If you have a better way to do it please let me know in the comments.

Happy Coding!