https://blog.logustus.com/categories/javascript/ Recent content in Javascript on Logan Barnett's blog Hugo en-us https://blog.logustus.com/demystifying-webpack/ Mon, 01 Jan 0001 00:00:00 +0000 https://blog.logustus.com/demystifying-webpack/ <h2 id="demystifying-webpack">Demystifying Webpack</h2> <div class="ox-hugo-toc toc"> <div class="heading">Table of Contents</div> <ul> <li><a href="#demystifying-webpack">Demystifying Webpack</a> <ul> <li><a href="#some-background">Some Background</a></li> <li><a href="#enter-webpack">Enter Webpack</a></li> <li><a href="#loaders">Loaders</a></li> <li><a href="#plugins">Plugins</a></li> <li><a href="#conclusion">Conclusion</a></li> </ul> </li> </ul> </div> <!--endtoc--> <h3 id="some-background">Some Background</h3> <p>I&rsquo;ve played with a lot of the Javascript build tools in the ecosystem. Today, <a href="https://webpack.js.org">Webpack</a> is my go to. I like it because it adds static analysis to my file paths for virtually everything. It also has fairly clear ways in which it transforms files. As with any tool, there&rsquo;s trade-offs to it. I can&rsquo;t get map files working for my unit tests, and the initial builds can take a really long time (upwards of a minute). Sure I can turn some features off to speed it up, but then I&rsquo;ll miss certain errors. For example, Angular&rsquo;s dependency injection system can lean on just the function parameter names, which break when any kind of minification is done. If I&rsquo;m not minifying, I&rsquo;m potentially missing those errors.</p>