How to copy a directory with Webpack?

Question

I've been playing around with Webpack to try and understand how it works but no matter what I do it never seems to do what I expect it to considering what the documentation and numerous videos seem to say.

As a first step to accomplishing my end goal, I simply want to copy all the files in the ./src directory to the ./dist directory, maintaining the full folder structure. After a bit of digging it seems what I need is something like this in the rules for my webpack.config.js (I currently only have html, css and js files in the source directory for testing purposes):

test: /\.(html|js|css)$/,
use: [
    {
        loader: 'file-loader',
        options: {
            name: '[path][name].[ext]'
        }
    }
]

Now in my entry.js file which is in the root directory I have this:

function requireAll (r) { r.keys().forEach(r); }
requireAll(require.context('./src/', true, /\.(html|js|css)$/));

...because from my understanding I need to import all the files I want to process into my entry file so they can then be placed into the new directory using file-loader.

With this setup, running webpack creates a dist folder like this:

dist/
    chunk.js     <-- (the output filename set in my webpack config)
    entry.js     <-- (an exact duplicate of the entry file)

This is obviously not what I want. I don't know whether I just need to tweak my setup or if I'm doing this completely wrong.

Answer 1

You can use the copy webpack plugin.

npm install --save-dev copy-webpack-plugin

Edit your webpack.config.js file:

//Add a plugin declaration at the begining of file
const CopyWebpackPlugin = require('copy-webpack-plugin');

//...

//search (or create) the plugin array. 
plugins: [
    // ...
    // Add your plugin
    new CopyWebpackPlugin([

        // Copy directory contents to {output}/to/directory/
        //{ from: 'from/directory', to: 'to/directory' },
        { from: 'src', to: 'dist' },
    ]
  ],

There is a lot of simple examples in documentation