Minify output

[skilledDeveloper]

It's a very useful plugin but currently does not support minfication. (e.g. UglifyJSPlugin or builtin webpack optimization).
Is there a simple way to minfy the merged JS output?

[markshapiro]

for some reason uglifyjs-webpack-plugin doesn't find the new (merge result) files in chunks when calling:

compilation.plugin('optimize-chunk-assets', (chunks, callback) => {
  chunks.reduce((acc, chunk) => acc.concat(chunk.files || []), []) ...

My implementation pushes the merge result files into compilation.assets.

I can solve the issue by adding optional data transformation:

new MergeIntoSingleFilePlugin({
    transform: (code, filename)=>require("uglify-js").minify(code);
    "vendor.js":[ ... ]
})

or if you know by chance a plugin that creates new files in a way that can be read by uglifyjs-webpack-plugin after being created, then I can use its implementation.

[skilledDeveloper]

I checked copy-webpack-plugin... it has the same issue.
So, maybe that's a good idea to add transform but I would add as an object-level option so that .js and .css files can have their own minification.

[markshapiro]

done, the api changed to:

files:{'vendor.js':[ ... ]},
transform:{
    'vendor.js': code => require("uglify-js").minify(code).code
}

[skilledDeveloper]

Awesome! Thanks.
It works just fine.
Since it's a breaking change, I would highly recommend to increase the major version in the package.json otherwise, people's code just stops working in their next build/deploy. ;)

[Deleted user]

@markshapiro Do you know if the transform option requires a particular version of uglify-js? Using it results in neither errors nor bundle creation for me, or any output at all for that matter

[Jimmy419]

@skilledDeveloper How can I minify a css file using transform?

[markshapiro]

@Jimmy419

var CleanCSS = require('clean-css');
...
 'combined.css': code => new CleanCSS({/*options*/}).minify(code).styles