Webpack 2 Tree Shaking Configuration

Grgur Grisogono
Feb 15, 2016 · 4 min read

Tree Shaking, a modern dead code elimination algorithm for ECMAScript 2015+ is one of the most anticipated features in Webpack 2. By eliminating unused ES6 exports, Webpack can further help the minification process to get your bundle much smaller than ever before.

Update 11/14/2016: Webpack 2 sample application code has been updated to match the most recent updates in Webpack (v2.2), React (v15.4) and Babel.

Tree Shaking With WebPack 2

Tree shaking, ultimately, bundles only the modules you import into your scripts. Any exports that were not imported will not be in the final JavaScript build.

In the sample code below, I will show how my new Webpack 2 configuration helped cut 28% out of my already optimized Webpack 1 project.

CommonJS Out, Native Imports In

To cut a long story short, you need to slightly adjust your .babelrc configuration. Instead of es2015 preset, you’ll need a new one named ‘babel-preset-es2015-native-modules’. This preset tells Babel to skip CommonJS module conversion during the transpilation process.

You would install this preset with npm.

npm i babel-preset-es2015-native-modules --save-dev

Your new .babelrc will look like this:

{
“presets”: [“es2015-native-modules”]
}

Or, if you use React

{
“presets”: [“es2015-native-modules”, “react”]
}

Your Babel configuration is now ready. Essentially, this was all it takes for tree shaking to work in Webpack 2.

Now, let’s shift focus on some of the important updates in Webpack 2 configuration for those who want to convert from v1.x.

Migrating from Webpack 1 to Webpack 2

  1. Loaders configuration

There have been minor improvements in how you define loader configuration. The previous GET-like syntax has been replaced with JSON-style notation.

Let’s observe this Webpack 1.x example:

loaders: [{
test: /\.html$/,
loader: 'file?name=[name].[ext]'
}]

The Webpack 2.x version of the same would look like this:

loaders: [{
test: /\.html$/,
loader: 'file',
query: {
name: '[name].[ext]'
}
}]

Notice how query parameters are now neatly stacked as key-value pairs.

2. Resolvers

In Webpack 2, resolvers from `root`, `modulesDirectories`, and `fallback` settings will merge into a single property — `modules`. Here is how we can resolve file and module locations in Webpack 2:

resolve: {
modules: [
path.resolve('./client'),
'node_modules'
]
}

You can specify a number of directories in `modules`, but make sure not to forget `node_modules` or npm package dependencies will fail to load.

3. Uglify Plugin Changes

The UglifyJsPlugin will no longer put loaders into minimize mode, and the debug option has been deprecated. These options are simply moved into a new plugin, LoaderOptionsPlugin, for separation of concerns reasons. Use it as such:

new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),

4. Other changes

Tobias Koppers aka Sokra published a very useful What’s new in Webpack 2 gist, which I highly recommend looking at.

Working Example

Take a look yourself and share this with your network. Someone will surely want to optimize their webpack build using the new tree shaking technology.

Project URL: https://github.com/ModusCreateOrg/budgeting-sample-app-webpack2

If you liked this article, please hit the recommend (♥️) button below. Want more like this? Follow Modus Create: Front End Development.

Modus Create: Front End Development

Tutorials, tips, and walk-throughs on web & mobile…

Modus Create: Front End Development

Tutorials, tips, and walk-throughs on web & mobile enterprise applications. JavaScript, HTML5, ReactJS, React Native, Angular, iOS, Android. From the developers at www.moduscreate.com

Grgur Grisogono

Written by

Principal @ModusCreate. Making the web better with @Reactjs and @Webpack. Certified @ScrumAlliance developer. @ManningBooks author. @MozDevNet contributor.

Modus Create: Front End Development

Tutorials, tips, and walk-throughs on web & mobile enterprise applications. JavaScript, HTML5, ReactJS, React Native, Angular, iOS, Android. From the developers at www.moduscreate.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store