CODEWITHSUNDEEP
webpackcopy
user687554
user687554

Reputation: 11131

Webpack - Copying Files from source to public using CopyWebpackPlugin

I have an app in which I'm using Webpack. In this app, I need to copy some static .html files from various directories in my source directory to the same hierarchy in the public directory. In an attempt to do this, I'm using the CopyWebpackPlugin. At this time, my webpack.config.js file looks like this:

webpack.config.js

const path = require('path');
const projectRoot = path.resolve(__dirname, '../');

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

module.exports = {
  entry: {
    app: './source/index.html.js',
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].package.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loaders: ['style-loader','css-loader']        
      },
    ]
  },
  plugins: [
    new CopyWebpackPlugin(
      [ { from: './source/**/*.html', to: './public', force:true } ],
      { copyUnmodified: true }
    )
  ]
};

When I run webpack from the command line, everything works as I want. The HTML files are successfully copied, including their directories, into the public directory. However, when copied, the source directory name is included. For example, if my directory structure is like this:

/source
  /dir-1
    /child-a
      index.html
      page.html
    /child-b
      index.html
      contact.html
  /dir-2
    index.html

I'm expecting the result of CopyWebpackPlugin to output to the following:

expected:

/public
  /dir-1
    /child-a
      index.html
      page.html
    /child-b
      index.html
      contact.html
  /dir-2
    index.html

However, what I'm actually getting is:

actual:

/public
  /source
    /dir-1
      /child-a
        index.html
        page.html
      /child-b
        index.html
        contact.html
    /dir-2
      index.html

Notice how the source directory is included in the copy target. I don't understand why this is being included. More importantly, I need to remove it. How do I remove the source directory from the path in the target?

Upvotes: 24

Views: 27139

Answers (3)

fredericrous
fredericrous

Reputation: 3028

I was able to copy the folder src/pages/Content/lib to the folder build/lib and keep the original structure with the following configuration:

    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/pages/Content/lib',
          to({ context, absoluteFilename }) {
            return path.join(__dirname, 'build', 'lib', path.relative(context, absoluteFilename));
          },
        },
      ],
    }),

I am using webpack 5.23 and copy-webpack-plugin 7

The following example page helped me understand how to configure the plugin: https://webpack.js.org/plugins/copy-webpack-plugin/#copy-in-new-directory

note that next to from and to, you could add the properties force: true and info: { minimized: true } to override the previous files and don't execute minimization on these

Upvotes: 2

The Fool
The Fool

Reputation: 20420

I have used name variable.

patterns: [
    { from: "src/*.svg",    to: '[name].svg'},
]

Upvotes: 4

Stanislav Mayorov
Stanislav Mayorov

Reputation: 4452

You can use context param.

new CopyWebpackPlugin(
    [{
        context: './source/',
        from: '**/*.html',
        to: './public',
        force: true
    }], {
        copyUnmodified: true
    }
)

Upvotes: 33

Related Questions