Add webpack for css and js

js/radar.js

@@ -0,0 +1,5 @@
+import '../styles/main.css';
+
+const add = (x, y) => x + y;
+
+add(1, 2);

package.json

@@ -4,8 +4,10 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npm run clean && babel-node ./scripts/build.js",
+    "build": "npm run clean && npm run build:radar && npm run build:webpack",
-    "clean": "babel-node ./scripts/clean.js",
+    "build:radar": "babel-node ./tasks/build.js",
+    "build:webpack": "webpack --config webpack.config.js",
+    "clean": "babel-node ./tasks/clean.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Tom Raithel <t.raithel@googlemail.com> (http://www.tomraithel.de)",
@@ -13,12 +15,16 @@
   "dependencies": {
     "async": "2.1.4",
     "babel-cli": "6.22.2",
+    "babel-loader": "6.2.10",
     "babel-preset-latest": "6.22.0",
     "babel-preset-stage-0": "6.22.0",
+    "css-loader": "0.26.1",
+    "extract-text-webpack-plugin": "2.0.0-beta.5",
     "front-matter": "2.1.1",
     "fs-extra": "2.0.0",
     "marked": "0.3.6",
     "pug": "2.0.0-beta8",
-    "walk": "2.3.9"
+    "walk": "2.3.9",
+    "webpack": "2.2.0"
   }
 }

styles/main.css

@@ -0,0 +1,3 @@
+body {
+  background: red;
+}

templates/layout.pug

@@ -2,8 +2,7 @@ block vars
 html
   head
     title #{title} - AOE Tech Radar
-    block scripts
+    link(rel='stylesheet', href='/styles.css')
-      script(src='/jquery.js')
 
   h3
     a(href='/') AOE Tech Radar
@@ -12,3 +11,5 @@ html
 
   body
     block content
+    block scripts
+      script(src='/bundle.js')

webpack.config.js

@@ -0,0 +1,38 @@
+var path = require('path');
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+const cssLoader = ExtractTextPlugin.extract({
+  loader: "css-loader"
+});
+
+module.exports = {
+  entry: {
+    bundle: './js/radar.js',
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js',
+  },
+  module: {
+    rules: [
+      {
+         test: /\.js?$/,
+         include: [
+           path.resolve(__dirname, "js")
+         ],
+
+         loader: "babel-loader",
+       },
+       {
+         test: /\.css?$/,
+         include: [
+           path.resolve(__dirname, "styles")
+         ],
+         loader: cssLoader,
+       },
+    ],
+  },
+  plugins: [
+    new ExtractTextPlugin("styles.css")
+  ],
+}