title: What Does Webpack 4 Expect From A Package With sideEffects: false
body: <p>Webpack 4 has added a new feature: it now supports a <code>sideEffects</code> flag in the <code>package.json</code> of the modules it is bundling. </p>
  
  <p>From <a href="https://medium.com/webpack/webpack-4-released-today-6cdb994702d4" rel="noreferrer">Webpack 4: released today</a></p>
  
  <blockquote>
    <p>Over the past 30 days we have worked closely with each of the frameworks to ensure that they are ready to support webpack 4 in their respective cli’s etc. Even popular library’s like lodash-es, RxJS are supporting the sideEffects flag, so by using their latest version you will see instant bundle size decreases out of the box.</p>
  </blockquote>
  
  <p>From <a href="https://github.com/webpack/webpack/blob/0b13cf19a19fd64d176c77aecbbf00ec57966276/examples/side-effects/README.md" rel="noreferrer">Webpack docs</a></p>
  
  <blockquote>
    <p>The "sideEffects": false flag in big-module's package.json indicates that the package's modules have no side effects (on evaluation) and only expose exports. This allows tools like webpack to optimize re-exports.</p>
  </blockquote>
  
  <p>Whilst the second link shows the results of using the flag, it doesn't clearly explain what constitutes a side-effect. ES6 includes the concept of side-effects for modules as outlined <a href="https://stackoverflow.com/questions/41127479/es6-import-for-side-effects-meaning">here</a>, but how does this relate to what Webpack considers side-effects.</p>
  
  <p>In the context of the <code>sideEffects</code> flag, what does a module need to avoid to use <code>sideEffects:false</code> without issues, or conversly, what does a module need to do in order to use <code>sideEffects:false</code> without issues.</p>
  
  <p>For completeness, despite @SeanLarkin's solid answer below, I would love to get clarification on the following:</p>
  
  <ol>
  <li><p>Obviously side-effects means something particular in fp and would include logging (console or elsewhere) and the throwing of errors. I'm assuming in this context these are perfectly acceptable?</p></li>
  <li><p>Can a module contain circular references and still use <code>sideEffects: false</code>? </p></li>
  <li><p>Is there any way to verify or that a module is able to verify that a module can <code>sideEffects: false</code> beyond trying to track down errors caused by its misuse?</p></li>
  <li><p>Are there any other factors that would prevent a module from being able to use <code>sideEffects: false</code>?</p></li>
  </ol>