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

Your email address will not be published. Required fields are marked *