Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Minimize only one Webpack chunk

I want to minimize my Javascript code for production. However I don't want to minimize the vendors' code because they already have a minimize version.

My current webpack.config.js splits the output code in two chunks.

module.exports = {

    entry: {
        vendor: ['jquery','angular'],
        app: ['./Client/app.start.js']
    },
    output: {
        filename: 'bundle.js',
        path: __dirname
    },

    resolve : {
        alias : {
            'angular' : 'angular/angular.min.js',
            'jquery'  : 'jquery/dist/jquery.min.js'
        }
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]
}

When I run >> webpack, both chunks ("bundle.js" and "vendor.bundle.js") are minimized. How can I configure Webpack to only minimize "bundle.js"?

Thanks

like image 886
Hudvoy Avatar asked Apr 29 '15 14:04

Hudvoy


2 Answers

If, for some reason, you really want to minify only one bundle you could use the test option of the UglifyJsPlugin. Use the bundle name and don't test for individual modules with a regex because when the code is consumed by UglifyJsPlugin it's already bundled.

new webpack.optimize.UglifyJsPlugin({
    compress: { warnings: false },
    test: /(vendor.bundle.js\.js)+/i
})

See the docs: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin

test, include, exclude (RegExp|Array): configure filtering of processed files (default: test: /.js($|\?)/i)

like image 127
Tieme Avatar answered Nov 14 '22 15:11

Tieme


Usually, you would have different configs (one with the uglify and another without), for production and development, you would minimize only in production, if that's what you want.

You probably already know this, but is good to be thorough. What you may not know, is that webpack does the job better and it is recommended to use untouched code and let webpack do its thing. I don't believe that the uglifyJsPlugin is able to target chunks, maybe there is another plugin that could do it, but i am unaware.

As a side note, you don't have to worry about double minification, it adds a small effect, considering that it is a production environment and that it doesn't change by the minute.

like image 32
Agamennon Avatar answered Nov 14 '22 13:11

Agamennon