• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

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

Webpack · September 28, 2021

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.

Dwayne

Leave a Reply Cancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Brendan Brewster
Brendan Brewster
6 months ago

“I still get caught up on silly things. Mostly build-related things trip me up.”

lol, I’m so glad I’m not the only one. 🙂 This really made my day. Thanks!

Why are things never straight forward and easy as you would think they should be?

1

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Removing A Character From The Start/End of a String In Javascript
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz