considr-frontend | There are a lot of module loaders out there : Require | Style Language library

There are a lot of module loaders out there: Require.js, JSPM using System.js, to name a few. Eventually the JavaScript community will come around and land on a winning module loader. My guess is Webpack, or something very similar. Go with Webpack. Webpack provides an elegant and multi-featured approach to module loading. It does everything I wanted it to do, and more. Really, a lot more. Let's try it out. We'll setup a project using Webpack, including ES6 transpiling & Sass loading. In this example, we'll setup an Angular based project using Webpack. Free free to load the basic project from Github.
This should be the bare minimum required to check if everything is working.
Let's create a package.json file to get started. Agree to whatever defaults. We're going to need a few basic dev-dependencies to get started with webpack.
If you're used to using Gulp or Grunt, you probably like the time saving gulp serve, grunt serve shortcuts for running your app. This can be accomplished with package.json scripts. Now run npm start. Again, the app can be found at localhost:8080/ by default, or localhost:8080/webpack-dev-server for the hot-module version. I like to bootstrap Angular, rather than adding ng-app="app" into the html. Notice require('angular')? That replaces adding <script src="bower_components/angular/angular.min.js">. No need for that, this is a module system. Also note that appModule.name will be taken from index.js, whatever its name might be: angular.module('THISNAMEHERE', []). Make the app file: index.js. Finally, let's make bootstrap.js our new Webpack entry point. Run the app (npm start). If all went well, running the app you should see: "Angular is working: true" at localhost:8080 or localhost:8080/webpack-dev-server. Bootstrap will get messy if we keep loading all our dependencies in there. Let's load them in a separate file called vendor.js. This file will get longer later. Webpack doesn't just load JavaScript, it can load nearly anything we might need: styles, images, fonts, etc. It handles these different file formats using loaders. Here's a list of available loaders. Let's start with the Style, CSS, and Sass loaders and install them as dev-dependencies. Webpack can use a Regex test to determine which loader to use. Add this to your webpack.config.js file. Loaders process from right to left. Meaning that if a .scss file is required as in the example, it will follow this order: sass loader => css loader => style loader. Run a quick test with a style sheet. Take a look, npm start, the background should now be red. Webpack makes it easy to use compiled languages like ES6, TypeScript, CoffeeScript, etc. Let's write our app in ES6 and compile it to ES5/ES3.