copy-webpack-plugin: Does not copy files to actual output folder when webpack-dev-server is used

I had the same problem with v4.0.1 (files not copied to output folder).

After seeing the Breaking Change described at v3, I was able to fix the problem by adding the WriteFileWebpackPlugin to my webpack config

const CopyWebpackPlugin = require('copy-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
...
module.exports = {
...
  plugins: [
    new WriteFilePlugin(),
    new CopyWebpackPlugin([
      { from: 'assets/images', to: 'assets/images' },
      { from: 'assets/fonts', to: 'assets/fonts' },
    ]),
    ...
  ]
...

(an alternative for those not wishing to revert back to v2.1.6)

This isn’t a bug, as explained in the FAQ. You must include the write-file-webpack-plugin to write files use webpack-dev-server.

I was broken on “4.0.0”, so I rolled back to “2.1.6”.

copy-webpack-plugin “2.1.6” works with webpack-dev-server:
css assets are now copied to my /dist folder when I use webpack-dev-server with “copy-webpack-plugin”.

Suggestion:

Maybe the fix that was added in 2.1.6 got removed, because someone didn’t know why it was needed, so diff “2.1.6” and “4.0.0” and see what changed.

Hey guys! This functionality seems to be broken in 3.0.1. Does not work for me with webpack-dev-server even under OS X with a very simple setup and an example from README.md. Works well with just webpack though.

This is my webpack.config.js:

var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');

module.exports = {
  context: path.join(__dirname, 'app'),
  devServer: {
    outputPath: path.join(__dirname, 'build')
  },

  entry: [
    'webpack-dev-server/client?http://localhost:8080'
  ],

  output: {
    path: "build",
    filename: "bundle.js"
  },

  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'images/',
        to: 'images/'
      }
    ])
  ]
};

Images are not copied to “build” directory. It is not even created when starting webpack-dev-server.

I have just tested with version 2.1.6 and confirm that it works both with webpack and webpack-dev-server.

Hope it’ll save someone some time. 😃

This worked for me new CopyPlugin([ { from: path.join(__dirname, "src", "*.html"), to: path.join(__dirname, "dist", "[name].html") } ])

@DevidCIC Did you manage to resolve the issue? It’s not copying anything for me

I am using:

• copy-webpack-plugin: “^4.5.1”,
• write-file-webpack-plugin: “^4.2.0”
• webpack: “^3.11.0”,
• webpack-dev-server: “~2.7.1”,

I tried the solution from @sfletche and on my localhost under assets I see the monaco folder, but on dev-server the monaco folder is not there and therfore the monaco-editor is not loading.

This is my webpack.common configuration:

new WriteFilePlugin(), new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' }, { from: 'src/meta' }, { from: 'node_modules/ngx-monaco-editor/assets/monaco', to: 'assets/monaco/', } ], isProd ? { ignore: ['mock-data/**/*'] } : undefined ),

This is what I see when running localhost: https://i.stack.imgur.com/qDlNA.png

And when I run dev-server the folder is missing for some reason: https://i.stack.imgur.com/PwtYV.png

Any suggestions ?

Broken for me as well in 4.0.1 with dev-server. Rolling back to 2.1.6 fixes the issue.

This is what I was referring to: https://github.com/kevlened/copy-webpack-plugin/pull/71/files

I see now that they are suggesting using write-webpack-plugin which does not work for you. I assume that using older version of the plugin does not work either, is it correct?

This is my webpack config from the project I was referring to previously:

var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
module.exports = {
  context: path.join(__dirname, 'web/static'),
  devServer: {
    outputPath: path.join(__dirname, 'priv/static')
  },
  entry: {
    landing: []
  },
  output: {
    path: "priv/static",
    filename: "js/[name].js"
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: 'images/', to: 'images/' },
      { from: 'fonts/', to: 'fonts/' },
      { from: 'styles/*.css', to: 'css/', flatten: true },
      { from: 'favicon.ico' },
      { from: 'robots.txt' }
    ])
  ]
};

Dependencies:

"copy-webpack-plugin": "^2.0.1",
"path": "^0.12.7",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.15.1"

It works both with webpack and webpack-dev-server.

Could you please check this setup? I can’t see that it is hacky in any way (I am very keen on well-configured projects). If it works for you then you may be able to integrate it smoothly in your project’s configuration.

Good luck!

I’ve removed the copy-webpack-plugin from my project completely and used a basic shell script inside the package.json. I made a new Phoenix starter project with it (Phoenix, Webpack, Stylus, React and Hot Module Replacement): Webpacker. Works nicely.

I can’t believe I wasted so much time with something a small shell script can do.

@szubtsovskiy, thanks again for your heads-up!

this worked for me

const path = require('path');
...
...
new CopyPlugin([{
        from: './node_modules/@pdftron/pdfjs-express/public',
        to: './build/pdfexpress/'
      }]
    ),

to

new CopyPlugin([{
      from: path.join(__dirname, './node_modules/@pdftron/pdfjs-express/public'),
      to: path.join(__dirname, './build/pdfexpress/')
    }])

Change the ./build/pdfexpress/ portion with your distribution (dist) folder

Try enabling debug to see where the latest version is putting the files in compilation.assets.

new CopyWebpackPlugin([/* patterns */], {
    debug: true
})