Copy-webpack-plugin: How do I copy a directory?

Created on 18 Jan 2018 · 4Comments · Source: webpack-contrib/copy-webpack-plugin

Thanks for the great loader, however it seems it may need a genius to understand how it works, all I need to is just to copy a directory a from /src/a to /dist so I can have /dist/a including all its sub-directories and files. I wasted 3 hours already and still can't get this groundbreaking operation right. Can anyone help me with this?

Source

gh67uyyghj

Most helpful comment

Hey @gh67uyyghj, I also found the docs for this plugin to be rather opaque, but I got it to work for my use cases… Try something like this?

// webpack.config.js
const path = require('path');

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: path.resolve(__dirname, 'src', 'index.js'),
  module: {
    rules: [ /* … */ ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'a',
        to: 'a'
      }
    ])
  ],
};

4cm4k1 on 18 Jan 2018

❤5

All 4 comments

Hey @gh67uyyghj, I also found the docs for this plugin to be rather opaque, but I got it to work for my use cases… Try something like this?

// webpack.config.js
const path = require('path');

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: path.resolve(__dirname, 'src', 'index.js'),
  module: {
    rules: [ /* … */ ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'a',
        to: 'a'
      }
    ])
  ],
};

4cm4k1 on 18 Jan 2018

❤5

Thank you, I hope the authors add this example in the README.

gh67uyyghj on 18 Jan 2018

@gh67uyyghj PR welcome

alexander-akait on 18 Jan 2018

For any fellow googlers that have come across this issue and not found the above working as expected, what ended up working for me was the following (in a Wordpress project):

// I have my development files in a "src" folder within the ./themes/THEMENAME folder
// I have my output / live files in a "dist" folder in the ./themes/THEMENAME folder

module.exports = {
    // ...other config
    output: {
        path: path.resolve(__dirname, "./wp-content/themes/THEMENAME/dist"),
        filename: "./js/[name].min.js"
    },
    plugins: [
        new CopyWebpackPlugin([{ 
            context: "./wp-content/themes/THEMENAME/src",
            from: "images/**/**"
            // I *did not* have to put a 'to' property here
        }])
    ]
}

The above config allowed me to copy all images files from ./src/images to ./dist/images. Once that's sorted you can use e.g. ImageMinPlugin to compress images in your dist folder.