Embracing the Messiness in Search of Epic Solutions

Webpack: Managing Tree Shaking




Sometimes, Webpack’s tree-shaking may accidentally eliminate imported code from import statements.

For example, we may have a root JS file that imports a CSS file:-

import React from 'react';
import ReactDOM from 'react-dom';
import '../css/index.css';


… and for some reason, the CSS file will never appear in the final bundle even if the Webpack config contains proper rules to handle CSS files.


To prevent Webpack from removing any “unreferenced” code (ex: global CSS files, JS polyfills, etc), list these side effects under package.json, for example:-

  "name": "front-end-stack",
  "sideEffects": [


Leave a Reply

%d bloggers like this: