• 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
1 year 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?

3

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Paginate An Array In Javascript
  • Waiting for an Element to Exist With JavaScript
  • Reliably waiting for network responses in Playwright
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How To Calculate A Javascript Date X Months Ago With Vanilla Javascript

Recent Comments

  • Kevmeister68 on Start-Ups and Companies That Embrace Work From Anywhere Will Be More Likely to Survive the Coming Recession in 2023
  • kevmeister68 on What Would Get People Back Into the Office?
  • Dwayne on PHP Will Not Die
  • Dwayne on How to Create a Blockchain With TypeScript
  • kevmeister68 on PHP Will Not Die

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz