Grab the minified version in ractive module with webpack

Question

I'm working with ractive and webpack in my front end application. The bundle size of my application is very big (1.3M), so I was thinking instead of minify the node modules with webpack, should be better to grab the already minified version of some modules ? for example in the case of ractive, the ractive module builds minified versions in node_modules/ractive when you install it via npm install ractive, so I'd like to tell webpack to grab this file instead of compress the whole file.

ractive.js size is

-rw-rw-r-- 1 vagrant vagrant 413K Apr 25 17:53 ractive.js

ractive.min.js is

-rw-rw-r-- 1 vagrant vagrant 162K Apr 25 17:53 ractive.min.js

Is there any way to tell this to webpack ?

Maybe instead of writing

var R = require('ractive')

should be beter to write

var R = require('./node_modules/ractive/ractive.min.js')

I don't like this option since it seems too hacky, but if there is no way to do it well with webpack, I would have to.

Answer 1

When webpack bundles source files, it doesn't minify them by default. This is probably why you end up with a large bundle file. You can run webpack -p in order to get the minified version of the bundle file. This will result a file size similar to a bundle which was using ractive-min as source in the first place.

If you still want to work with the minified version of ractive in development you could use NormalModuleReplacementPlugin. Here is an example:

webpack.config.js

var webpack = require('webpack');

module.exports = {
    // other configuration settings

    plugins: [
        new webpack.NormalModuleReplacementPlugin(/^ractive$/, 'ractive/ractive.min')
    ]
};