Negatory. Postpone Mission.

    webpack-plugin-babel-uglify

    1.0.0 • Public • Published

    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 = require('webpack-plugin-babel-uglify')
     
    module.exports = {
        ...
        plugins: [
            new BabelUglifyPlugin(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

    Keywords

    none

    Install

    npm i webpack-plugin-babel-uglify

    DownloadsWeekly Downloads

    7

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    4.67 kB

    Total Files

    4

    Last publish

    Collaborators

    • dhmk083