How to copy static files to build directory with Webpack?

Question

I'm trying to move from Gulp to Webpack. In Gulp I have task which copies all files and folders from /static/ folder to /build/ folder. How to do the same with Webpack? Do I need some plugin?

Answer 1

Requiring assets using the file-loader module is the way webpack is intended to be used (source). However, if you need greater flexibility or want a cleaner interface, you can also copy static files directly using my copy-webpack-plugin (npm, Github). For your static to build example:

const CopyWebpackPlugin = require('copy-webpack-plugin');   module.exports = {     context: path.join(__dirname, 'your-app'),     plugins: [         new CopyWebpackPlugin({             patterns: [                 { from: 'static' }             ]         })     ] }; 

---

Compatibility note: If you're using an old version of webpack like [email protected], use [email protected]. Otherwise use latest.

Answer 2

You don't need to copy things around, webpack works different than gulp. Webpack is a module bundler and everything you reference in your files will be included. You just need to specify a loader for that.

So if you write:

var myImage = require("./static/myImage.jpg"); 

Webpack will first try to parse the referenced file as JavaScript (because that's the default). Of course, that will fail. That's why you need to specify a loader for that file type. The file- or url-loader for instance take the referenced file, put it into webpack's output folder (which should be build in your case) and return the hashed url for that file.

var myImage = require("./static/myImage.jpg"); console.log(myImage); // '/build/12as7f9asfasgasg.jpg' 

Usually loaders are applied via the webpack config:

// webpack.config.js  module.exports = {     ...     module: {         loaders: [             { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }         ]     } }; 

Of course you need to install the file-loader first to make this work.