Skip to content

Backslashes in asset paths in v5 (breaking change from v4) #383

@jeffposnick

Description

@jeffposnick
  • Operating System: Windows 10
  • Node Version: 10.15.3
  • NPM Version: 6.4.1
  • webpack Version: 4.32.1
  • copy-webpack-plugin Version: 5.0.3

Expected Behavior

The paths exposed in webpack for assets copied over on Windows-based systems using copy-webpack-plugin v5 should use forward slashes (/) as path separators.

Asset paths in the webpack output are meant to be usable as URLs, which always use / as a path separator.

Actual Behavior

Starting in copy-webpack-plugin v5, when performing a webpack build on a Windows-based system, backslashes (\) are used as the path separator in the final asset paths passed to webpack.

This creates downstream issues for other plugins that want to read the asset paths and treat them as URLs, as described in GoogleChrome/workbox#2057

This is a breaking change in behavior vs. copy-webpack-plugin v4.

Code

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
 
module.exports = {
    mode: 'production',
    entry: {
        index: path.join(__dirname, 'src', 'js', 'index.js'),
    },
    output: {
        path: path.join(__dirname, 'dist'),
    },
    plugins: [
        new CopyWebpackPlugin([
            'src/**/*{css,html}'
        ])
    ]
};

How Do We Reproduce?

Use the following webpack config with a basic input filesystem—the actual contents don't really matter so much, and in this case I had a src/index.html and src/css/index.css. Compare the output using the v4 and v5 branches of copy-webpack-plugin.

In v4, the build process output looks like the following, using the "correct" / path separators:

Hash: 3223b6131435ca79accf
Version: webpack 4.32.1
Time: 346ms
Built at: 05/22/2019 1:10:22 PM
            Asset       Size  Chunks             Chunk Names
         index.js  947 bytes       0  [emitted]  index
src/css/index.css   34 bytes          [emitted]
   src/index.html   13 bytes          [emitted]
Entrypoint index = index.js
[0] ./src/js/index.js 18 bytes {0} [built]

In v5, the build process output looks like the following, using the "incorrect" \ path separators:

Hash: 3223b6131435ca79accf
Version: webpack 4.32.1
Time: 153ms
Built at: 05/22/2019 1:07:05 PM
            Asset       Size  Chunks             Chunk Names
         index.js  947 bytes       0  [emitted]  index
src\css\index.css   34 bytes          [emitted]
   src\index.html   13 bytes          [emitted]
Entrypoint index = index.js
[0] ./src/js/index.js 18 bytes {0} [built]

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions