YonatanKra

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];

YonatanKra

{
  "name": "your-webpack-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],

YonatanKra

#phrase-form-wrapper {
    min-height: 50px;
    background: rgba(125, 125, 0, .25);
    margin-bottom: 5px;
}

#phrase-fireworks-wrapper {
    height: 450px;
    outline: 1px red solid;
}

YonatanKra

<form name="phrase-form">
    <input name="phrase"
           class="phrase-input"
           type="text">
    <input type="submit"
           class="phrase-input-button" value="Start Awesomeness!">
</form>

YonatanKra

{
  "name": "webpackPost",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },

YonatanKra

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    devtool: 'inline-source-map',
    devServer: {
        open: true,

YonatanKra

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: './src/app.js',  // this is our app
    output: {
        filename: '[name].bundle.js', // the file name would be my entry's name with a ".bundle.js" suffix

YonatanKra

// get the template
import template from './form.index.html';
// get the styles
import {} from './form.index.css';

class YOPFForm{
    constructor(element) {
        this._element = element;
        this.setTemplate();
    }

YonatanKra

import template from './index.html';
import {} from './app.css';

import YOPFForm from './form/form.index';
import YOPFFireworks from './fireworks/fireworks.index';

(function() {
    document.body.innerHTML = template;
    const form = new YOPFForm(document.getElementById('phrase-form-wrapper'));
})();

YonatanKra

import template from './index.html';
import {} from './app.css';

import YOPFForm from './form/form.index';
import YOPFFireworks from './fireworks/fireworks.index';

(function() {
    function onPhraseChange(phrase) {
        fireworks.doFireworks(phrase);
    }