Difference between lib and dist folders when packaging library using webpack? : <p>Ive just published my first package (a react component) to npm but im having some trouble understanding the difference between what the <code>lib</code> directory is compared to the <code>dist</code>.</p>

<p>Currently I generate both <code>lib</code> and <code>dist</code> however my package "main" points to the <code>dist</code> unminified js file which has been built using webpack and output as UMD. The lib folder is built using <code>babel</code> taking the <code>src</code> and outputting to <code>lib</code>.</p>

<p>The dist folder contains both [unminified/minified].js files as well as [unminified/minified].css files.</p>

<p>My main confusion is with the lib folder since imports from there currently wouldn't work seeing as I just transform <code>src -&gt; lib</code> meaning the scss references are still there and the scss files aren't transformed either.</p>

<p>I use CSS Modules (css-loader, styles-loader, postcss-loader etc) to generate my CSS files and this is where the confusion is since, wouldn't I also need to use webpack to generate my <code>lib</code> folder seeing as the <code>scss</code> files/import references need to be transformed to <code>css</code>?</p>

<p><strong>Are you meant to have both lib and dist or is the UMD build in dist fulling the same purpose as that of having a lib folder?</strong></p>

<p><strong>If you are supposed to have both how would I achieve this, since I couldnt find any info regarding generating the lib folder when using CSS modules within your js files and still maintaing the same folder structure of that of src (while still generating dist)?</strong></p>
