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

[afilp]

It appears that nothing happens when trying to copy some extra files (not bundled) to the output folder, under the webpack-dev-server logic:

devServer: {
            contentBase: './public',
            outputPath: path.resolve(ROOT_PATH, 'public'),
            historyApiFallback: true,
            hot: true,
            inline: true,
            port: 33000,
            progress: true
        },
        plugins: [
            new CopyWebpackPlugin([
                {from: 'src/css', to: 'css', force: true},
                {from: 'src/img', to: 'img', force: true}
            ]),
            new webpack.HotModuleReplacementPlugin(),
            new OpenBrowserPlugin({url: 'http://localhost:33000'})
        ]

Can this be done somehow? The webpack-dev-server needs this to show some external CSS and IMAGE files. I used to be doing this with gulp but now I want to get rid of this dependency.

Using your plugin with the simple webpack (for build) works perfectly but not for webpack-dev-server.

NOTE: I can achieve what I want if I use both webpack and webpack-dev-server on the start script, but this is not too elegant and done only for solving this problem:

  "scripts": {
    "build": "webpack",
    "start": "npm run build && webpack-dev-server"
  },

[Foxandxss]

So I maintain a webpack starter (the one already linked in this issue) and we use this plugin.

We carry over a file for development (using webpack-dev-server) and it only works on OSX. Windows users gets a 404 on the file. Build works fine indeed.

@af7 what is your OS?

[matus-m]

Hey, I have debugged the behaviour on windows and it seems to be a conflict in path handling between copy plugin and webpack's compilation.assets.
The tests also fail on windows with:

apply function with file in from can use a glob to move multiple files to the root directory:

      AssertionError: expected { Object (directory/directoryfile.txt, directory/nested/nestedfile.txt, ...) } to have keys 'file.txt', 'directory\\directoryfile.txt', and 'directory\\nested\\nestedfile.txt'
      + expected - actual

       [
      -  "directory/directoryfile.txt"
      -  "directory/nested/nestedfile.txt"
      +  "directory\\directoryfile.txt"
      +  "directory\\nested\\nestedfile.txt"
         "file.txt"
       ]

Webpack keys in compilation.assets are expected to contain forward slash / regardless of platform. However as copy plugin uses path normalization, it will store the copied assets with platform specific separator, which on windows happens to be \\.

I am not sure, why it only causes problems when running webpack-dev-server though, as with regular webpack it does not pose problems.

A dirty fix for the issue experienced by @Foxandxss is to force forward slashes in compilation.assets keys - change line 141 in index.js to:

function writeFileToAssets(opts) {
  var compilation = opts.compilation;
  var relFileDest = opts.relFileDest;
  var absFileSrc = opts.absFileSrc;
  var forceWrite = opts.forceWrite;
  var lastGlobalUpdate = opts.lastGlobalUpdate;

  //ensure forward slashes
  relFileDest = relFileDest.replace(/\\/g, "/");

After that the dev server will see the copied assets and everything will work as expected.
This would require change in test cases however, otherwise it will report errors in many cases due to path normalization/separator mismatch.

@kevlened do you think this would be ok? Or do you have any more info on how webpack handles keys in compilation.assets?

In case you are fine with the quick fix, i can submit a PR with the changes I have done locally.

[Foxandxss]

A solution to this would save the world. In angular there there is a specific behavior we need and the only sane way is this plugin. I need to document it officially but needs to work in windows.

[mdudek]

Fix from @yntelectual works, could you do a PR please?

[afilp]

@Foxandxss I just saw your comment, my OS is indeed Windows 10.
@yntelectual Thanks for the fix!

[rexgnu]

I'd also love to see this issue resolved! 😃
Awesome fix @yntelectual

[matus-m]

@kevlened what is your opinion on the proposed fix? Could it make into a minor release 1.1.2 so that folks who need it do not need to wait for more robust/architectural solution?

[kevlened]

@yntelectual Windows compatibility and webpack-dev-server functionality is fixed in v2.0.1! In order to use webpack-dev-server, remember to add devServer.outputPath to your webpack config, as shown in the README.md

[matus-m]

Cool, thanks & happy hacking

[szubtsovskiy]

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. :-)