Webpack + NPM for managing dependencies.

I’m working on a JavaScript app and a few months ago, I went down a path using NPM, Bower, and  Webpack to manage dependencies and to do a few additional operations on files such as bundling js and scss or minifying files.

Since I started, Bower got deprecated. It is no longer developed and while I could be using its most recent version over the next year or so, I was worried I would be stuck with a package manager that isn’t maintained anymore. In result, I did what every sensible programmer who is finished with 75% of their project would do. I decided to get rid of Bower and convert the code to run only on NPM and Webpack. So pretty much starting fresh eliminating Bower and distributing Bower’s competencies between NPM and Webpack.

NPM handles all dependencies inside of my project. Webpack is responsible for managing the structure of the source code and the distribution code. The starter template I made covers pretty much everything I need every time I start a new project…. thus the name: Webpack Template.

Here is the list that this template covers:

  • Minifying .js files
  • Bundling and minifying css and scss
  • Bootstrap
  • jQuery
  • Mustache.js for UI templating
  • jsdoc for generating documentation
  • automatic deployment to Github Pages
  • npm run dev- to run Webpack Dev server.

What’s cool is that once you make any progress on your UI or the backend code, you can deploy everything to Github Pages very easily (As long as you host this project on Github). You can not only share your front-end progress with your team but also give them access to auto-generated documentation that gets build as well.