Home

src/sass/style.scss

@import '~bootstrap/scss/bootstrap.scss';

body {
  color: red;
}

src/js/main.js

require("../sass/style.scss")

console.log("hallo!")

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    main: ['./js/main.js']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].min.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'src')
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // creates style nodes from JS strings
          { loader: "style-loader" },
          // translates CSS into CommonJS (javascript modul)
          { loader: "css-loader", options: { sourceMap: true } },
          // compiles Sass to CSS
          { loader: "sass-loader", options: { sourceMap: true } }
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: ['file-loader']
      }]
  },
  resolve: {
    modules: ['node_modules']
  }
};
```

# package.json

```json
{
  "name": "webpack-playground",
  "version": "1.0.0",
  "description": "a playground",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "private": true,
  "license": "UNLICENSED",
  "dependencies": {
    "bootstrap": "4.0.0-beta",
    "css-loader": "0.28.4",
    "node-sass": "4.5.3",
    "jquery": "3.2.1",
    "sass-loader": "6.0.6",
    "file-loader": "0.11.2",
    "style-loader": "0.18.2",
    "webpack": "3.2.0",
    "webpack-dev-server": "2.5.1",    
    "font-awesome": "^4.7.0",
    "roboto-fontface": "0.8.0"
  }
}
```



# Linkliste

* https://docs.emmet.io/cheat-sheet/
* `<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">`

# HTML5

```

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
	<title>HTML5 Logo</title>
	<path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
	<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
	<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
	<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
	<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/>
</svg>
```

# 5 Tage - Themen 

* HTML5, CSS3, Bootstrap & Less
* TypeScript
* Angular 4 Features & Konzepte
* Angular-CLI & WebPack
* Komponenten
* Direktiven
* Routing
* Formulardaten & Events
* Unit-Tests & Oberflächentests
* Kendo UI
* Dependency Injection & Services
* Formularverarbeitung
* Deployment
* Authentifizierung mit OAuth