CODEWITHSUNDEEP
javascriptwebpack
zero
zero

Reputation: 51

copy files with copyWebpackPlugin

I'm working with copy files from /src/libs/** to /dist directory using webpack,My config of copyWebpackPlugin is 

new copyWebpackPlugin([{
    from: __dirname + '/src/libs/**',
    to: __dirname + '/dist'
}])

but It will generate an extra src folder in dist.I expect my target folder will be /dist/copy-files but it's /dist/src/copy-files.Is there any solutions?

Upvotes: 5

Views: 10931

Answers (4)

jacobedawson
jacobedawson

Reputation: 3212

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.

Upvotes: 1

Thomas Jacob
Thomas Jacob

Reputation: 658

You have to differentiate between context and from.

  • context is the root path for the source files, and will not be added to the target paths.
  • from: The paths determined by the from glob, however, will be added to the target paths.

So in your case, try

new copyWebpackPlugin([{
    context: __dirname + '/src',
    from: 'libs/**',
    to: __dirname + '/dist'
}])

instead.

Upvotes: 9

juanitourquiza
juanitourquiza

Reputation: 2194

If you want to copy several folders, it is done like this:

.addPlugin(new CopyWebpackPlugin([
    // copies to {output}/static
    {
      from: './assets/adminlte', to: 'adminlte'
    }
]))

.addPlugin(new CopyWebpackPlugin([
    // copies to {output}/static
    {
        from: './assets/radical', to: 'radical'
    }
]))

This is my solution on symfony 4

Upvotes: 0

lukas-reineke
lukas-reineke

Reputation: 3322

If you use an absolute path in to, copy-webpack-plugin will add the resolved from to it.
To get what you want, just name the directory.

new copyWebpackPlugin([{
    from: __dirname + '/src/libs/**',
    to: 'dist'
}])

The from path also doesn't need to be absolute. It won't change the result, but still maybe a bit cleaner.

new copyWebpackPlugin([{
    from: 'src/libs/**',
    to: 'dist'
}])

Upvotes: 2

Related Questions