What it does
Transpiles every emitted asset that has .js
extension with babel-core
and then minifies it with uglify-js
.
Why
To use a full power of webpack's tree-shaking and thus have a minimal possible bundle's size you should ensure two things:
- import from es6 modules
- keep webpack's output in es6
Because this is how webpack works:
- it concatenates all imported modules and your code into a single file
- marks unused imports with special tags
- in production uses uglify plugin which strips all tokens marked as unused
Now, the problem is that if you use babel-loader
, it transpiles each file into es5 and each class into a function.
And webpack can not mark that transpiled classes as unused. (Of course this may change in the future).
So, in this scenario all unused classes will remain in the final bundle. You can read more about it in this article.
The idea of this plugin is that you will keep webpack's output as es6, then minify it. This time unused classes will be removed. And after that, to get es5 compatible bundle you will use this plugin, which transpiles es6 to es5 and then minifies again. So, in the end you will have transpiled and maximally compressed file.
You can run npm test
command to compare sizes of produced files.
Of course, you could just write a small build script, which will do the same. But this plugin might be more convenient to use on different platforms.
Usage
As webpack 4 now uses minifier which understands es6 (webpack 3 can not), your config simplifies to this:
const BabelUglifyPlugin = moduleexports = ... plugins: x // undefined - use defaults: env preset + sourceMaps // `true` - use .babelrc or package.json (default babel lookup) // {} - use these options
and then invoke like this:
webpack --mode=production
Todo
Add ability to filter input .js files?
License
MIT