How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)

Despite the fact that I’ve been doing this whole front-end development thing for over a decade now, I still get caught up on silly things. Mostly build-related things trip me up.

In a project using Webpack for the bundler, I needed to copy a folder from a node_modules directory and include the files in my bundle (don’t ask).

The first thing I did was this:

new CopyWebpackPlugin({
  patterns: [
    { from: 'node_modules/@ia/qce/dist', to: 'content/qce' },
  ]}),

Now, the problem here is that the copy-webpack-plugin will copy the entire path to the file. So, inside of my content/qce directory I had node_modules/@ia/qce/dist folders (the entire path). It will recreate the entire folder structure from the from value instead of just taking the contents (like we want).

This is why it always pays to read the docs. There is a context configuration property that will prevent this behaviour from occurring.

    new CopyPlugin({
      patterns: [
        {
          from: "dist/",
          to: "content/qce",
          context: "node_modules/@ia/qce/",
        },
      ],
    }),

The bottom line here is to specify the context.