Copy-webpack-plugin: transform not working... or... transform example in the doc?

Created on 11 Nov 2016 · 9Comments · Source: webpack-contrib/copy-webpack-plugin

Hello guys (and ladies).

I'm trying to copy my index.html and I need to transform a path inside it.

Something like this:

<html>
  <head>
    <script src="/pathToChange/test.bundle.js"></script>
  </head>
  <body></body>
</html>

I need to change pathToChange to '/'.

My plugin config is:

{
    from: path.join(BASE_PATH, 'assets/index.html'),
    to: './',  // build base dir,
    toType: 'template',
    transform: function (content, path) {
      return content.replace('/pathToChange/', '/');
  }
}

The path is not changing. Also I tried returning just 'test' to see if the hole content is overwritten to 'test', but that is not even working.

Am I doing something wrong, guys?

Thanks.

Source

letoss

❤3

Most helpful comment

Glad it worked! It's a Buffer. A .toString() should convert it for you.

kevlened on 11 Nov 2016

👍17 🎉3 ❤1

All 9 comments

Check your version. This feature wasn't added until 4.0.0 (the latest release).

kevlened on 11 Nov 2016

👍3

Thanks for the quick answer @kevlened. Now it's working. I had 1.1.1 version.

Now I have an error ERROR in content.replace is not a function. What type is content?

letoss on 11 Nov 2016

Glad it worked! It's a Buffer. A .toString() should convert it for you.

kevlened on 11 Nov 2016

👍17 🎉3 ❤1

Thank you very much!

I suggest to add the version thing and a little example about transform into the doc.

letoss on 11 Nov 2016

👍9

+1 @letoss

Maybe we could add a real world example of transform and precising the type of content and path

pascaloliv on 28 Mar 2018

👍3

@pascaloliv here's an advanced example I was able to implement that might help you. I wanted to minify a JS file as part of my webpack build, but to not have webpack transform it at all.

import CopyWebpackPlugin from 'copy-webpack-plugin';
import UglifyJS from 'uglify-es';

module.exports = [
  {
    entry: {
      app: './app.js'
    },
    output: {
      path: path.resolve(__dirname, 'build'),
      publicPath: './',
      filename: '[name].bundle.js'
    },
    plugins: [
      new CopyWebpackPlugin([
        {
          from: 'loader.js',
          to: '.',
          transform(content, src) {
            // @param content: Buffer
            // @param src: String 
            // @return Buffer
            return Promise.resolve(Buffer.from(UglifyJS.minify(content.toString()).code, 'utf8'));
          }
        }
      ])
    ]
  }
];

potench on 15 May 2018

👍5

@potench : Cheers mate, I just found transform example in the doc a bit minamalist.

[
  new CopyWebpackPlugin([
    {
      from: 'src/*.png',
      to: 'dest/',
      transform (content, path) {
        return optimize(content)
      }
    }
  ], options)
]

pascaloliv on 15 May 2018

👍1

Thanks!
The content.toString() and the Buffer.from() bits is what I was missing. Be great if that could make it's way to the docs page.

Jaans on 10 Jul 2018

👍8

An other example that could be usefull:

[new CopyPlugin(
  [{
    from: config.json,
    to: 'whatever.ext',
    transform(content, path) {
      const configJson = require(path);
      // now use the content of your config.json file as JSON object.
    }
  }]
)]