Webpack

Webpack is just a code bundler. It requires an entry point js file ie. app.js (similar to AppController), grabs all the imports in this file and bundles them up into one JS file.

Transforming each import how we want

var path  = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
   entry: './app/index.js', // entry point containing all our imports
   output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'index_bundle.js'
   },
   module: {
      rules: [
         { test: /\.(js)$/, use: 'babel-loader' }, // transformer
         { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // transformer
           // css-loader gets your css file with @import and url() resolved via web-packs require functionality, it just compiles it sort of but does nothing with it
           // style-loader inserts those styles into the page
           // ----
           // require("style!css!scss!./file.scss")
           // 1. Turn file.scss into plain CSS with the Less loader
           // 2. Resolve all the imports and url(...)s in the CSS with the CSS loader
           // 3. Insert those styles into the page with the style loader
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
         template: 'app/index.html'
      });
   ]
}