Converted webpack config to TS and updated webpack to 3.4

Author: normano64

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 env/
 node_modules/
-config.js
+config.dev.ts
+config.prod.ts
 build/build.js
-build/awCache/
+.awCache/

config.example.js config.example.ts

@@ -1,9 +1,9 @@
 // Example config, rename to config.js.
-module.exports = {
+export default {
     api: {
         host: "localhost:8000",
         key: "03f21b939e022176e87feb7704477bbc"
-    }
+    },
     thunder: {
         host: "localhost:8080",
         key: "public123",

dev/webpack.dev.ts

@@ -0,0 +1,112 @@
+// tslint:disable:no-console
+import * as webpack from "webpack";
+import * as WebpackDevServer from "webpack-dev-server";
+import * as path from "path";
+import config from "../config.dev";
+
+const port = 3000;
+const publicPath = "/";
+
+new WebpackDevServer(webpack({
+    target: "web",
+    devtool: "#source-map",
+    context: path.resolve(__dirname, "../"),
+    entry: [
+        "tslib",
+        "webpack-dev-server/client?http://localhost:3000",
+        "webpack/hot/only-dev-server",
+        path.resolve("src/App")
+    ],
+    output: {
+        path: path.resolve("build"),
+        filename: "build.js",
+        publicPath
+    },
+    resolve: {
+        extensions: [".css", ".scss", ".js", ".jsx", ".ts", ".tsx", ".json"],
+        modules: [
+            path.resolve("node_modules"),
+            path.resolve("src")
+        ]
+    },
+    module: {
+        rules: [{
+            test: /\.tsx?$/,
+            use: [
+                "react-hot-loader",
+                "awesome-typescript-loader"
+            ],
+            exclude: /node_modules/
+        }, {
+            test: /\.s?css$/,
+            use: [
+                "style-loader",
+                {
+                    loader: "typings-for-css-modules-loader",
+                    options: {
+                        modules: true,
+                        importLoaders: 1,
+                        localIdentName: "[name]_[local]_[hash:base64:5]",
+                        sass: true,
+                        namedExport: true,
+                        camelCase: true
+                    }
+                },
+                "postcss-loader",
+                {
+                    loader: "sass-loader",
+                    options: {
+                        includePaths: [
+                            path.resolve("node_modules"),
+                            path.resolve("src")
+                        ]
+                    }
+                }
+            ]
+        }, {
+            test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
+            loader: "file-loader"
+        }]
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.DefinePlugin({
+            "process.env": {
+                NODE_ENV: JSON.stringify("development")
+            },
+            "config": {
+                API: JSON.stringify(config.api),
+                THUNDER: JSON.stringify(config.thunder),
+                SENTRY: JSON.stringify(config.sentry),
+                SCREEN: JSON.stringify(process.env.SCREEN || "primary")
+            },
+            "__DEV__": true
+        })
+    ]
+}), {
+    publicPath,
+    contentBase: "./build",
+    hot: true,
+    stats: {
+        colors: true,
+        hash: false,
+        version: false,
+        timings: true,
+        assets: true,
+        chunks: false,
+        modules: false,
+        reasons: false,
+        children: false,
+        source: false,
+        errors: true,
+        errorDetails: true,
+        warnings: true,
+        publicPath: false
+    }
+}).listen(port, "0.0.0.0", (err, result) => {
+    if (err) {
+        console.log(err);
+    }
+
+    console.log("Listening at http://localhost:" + port);
+});

dev/webpack.prod.ts

@@ -0,0 +1,104 @@
+// tslint:disable:no-console
+import * as webpack from "webpack";
+import * as path from "path";
+import config from "../config.prod";
+
+const publicPath = "/";
+
+webpack({
+    target: "web",
+    devtool: "#source-map",
+    context: path.resolve(__dirname, "../"),
+    entry: [
+        "tslib",
+        path.resolve("src/App")
+    ],
+    output: {
+        path: path.resolve("build"),
+        filename: "build.js",
+        publicPath
+    },
+    resolve: {
+        extensions: [".css", ".scss", ".js", ".jsx", ".ts", ".tsx", ".json"],
+        modules: [
+            path.resolve("node_modules"),
+            path.resolve("src")
+        ]
+    },
+    module: {
+        rules: [{
+            test: /\.tsx?$/,
+            loader: "awesome-typescript-loader",
+            exclude: /node_modules/
+        }, {
+            test: /\.s?css$/,
+            use: [
+                "style-loader",
+                {
+                    loader: "typings-for-css-modules-loader",
+                    options: {
+                        modules: true,
+                        importLoaders: 1,
+                        localIdentName: "[name]_[local]_[hash:base64:5]",
+                        sass: true,
+                        namedExport: true,
+                        camelCase: true
+                    }
+                },
+                "postcss-loader",
+                {
+                    loader: "sass-loader",
+                    options: {
+                        includePaths: [
+                            path.resolve("node_modules"),
+                            path.resolve("src")
+                        ]
+                    }
+                }
+            ]
+        }, {
+            test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
+            loader: "file-loader"
+        }]
+    },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false,
+                drop_console: true
+            }
+        }),
+        new webpack.DefinePlugin({
+            "process.env": {
+                NODE_ENV: JSON.stringify("production")
+            },
+            "config": {
+                API: JSON.stringify(config.api),
+                THUNDER: JSON.stringify(config.thunder),
+                SENTRY: JSON.stringify(config.sentry),
+                SCREEN: JSON.stringify(process.env.SCREEN || "primary")
+            },
+            "__DEV__": false
+        })
+    ]
+}).run((err, stats) => {
+    if (err) {
+        console.log(err);
+    }
+    console.log(stats.toString({
+        colors: true,
+        hash: false,
+        version: false,
+        timings: true,
+        assets: true,
+        chunks: false,
+        modules: false,
+        reasons: false,
+        children: false,
+        source: false,
+        errors: true,
+        errorDetails: true,
+        warnings: true,
+        publicPath: false
+    }));
+});

package.json

@@ -3,8 +3,8 @@
   "version": "0.0.1",
   "description": "Foobar Kiosk application.",
   "scripts": {
-    "start": "node server.js",
-    "build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.prod.config.js",
+    "start": "NODE_ENV=development node node_modules/ts-node/dist/bin ./dev/webpack.dev.ts",
+    "build": "NODE_ENV=production node node_modules/ts-node/dist/bin ./dev/webpack.prod.ts",
     "tslint": "node node_modules/tslint/bin/tslint --project tsconfig.json",
     "precommit": "npm run tslint"
   },
@@ -17,7 +17,7 @@
     "url": "https://github.com/uppsaladatavetare/foobar-kiosk/issues"
   },
   "devDependencies": {
-    "@types/classnames": "0.0.28",
+    "@types/classnames": "2.2.0",
     "@types/isomorphic-fetch": "0.0.34",
     "@types/qrcode.react": "0.6.2",
     "@types/react": "15.6.1",
@@ -26,16 +26,18 @@
     "@types/react-redux": "4.4.47",
     "@types/redux-logger": "2.6.31",
     "@types/redux-thunk": "2.1.30",
-    "autoprefixer": "6.4.0",
+    "@types/webpack": "3.0.5",
+    "@types/webpack-dev-server": "2.4.1",
+    "autoprefixer": "7.1.2",
     "awesome-typescript-loader": "3.2.2",
     "classnames": "2.2.5",
-    "css-loader": "0.24.0",
-    "file-loader": "0.10.1",
+    "css-loader": "0.28.4",
+    "file-loader": "0.11.2",
     "husky": "0.14.3",
     "isomorphic-fetch": "2.2.1",
-    "node-sass": "3.8.0",
-    "postcss": "5.1.2",
-    "postcss-loader": "0.11.0",
+    "node-sass": "4.5.3",
+    "postcss": "6.0.8",
+    "postcss-loader": "2.0.6",
     "qrcode.react": "0.6.1",
     "raven-for-redux": "0.3.0",
     "raven-js": "3.12.1",
@@ -48,15 +50,16 @@
     "redux-logger": "2.6.1",
     "redux-thunk": "2.1.0",
     "reflexbox": "1.1.4",
-    "sass-loader": "4.0.0",
-    "style-loader": "0.13.1",
+    "sass-loader": "6.0.6",
+    "style-loader": "0.18.2",
+    "ts-node": "^3.3.0",
     "tslib": "1.7.1",
     "tslint": "5.5.0",
     "typescript": "2.4.2",
     "typings-for-css-modules-loader": "1.5.0",
-    "webpack": "1.13.1",
-    "webpack-dev-middleware": "1.6.1",
-    "webpack-dev-server": "1.14.1",
-    "webpack-hot-middleware": "2.10.0"
+    "webpack": "3.4.1",
+    "webpack-dev-middleware": "1.12.0",
+    "webpack-dev-server": "2.6.1",
+    "webpack-hot-middleware": "2.18.2"
   }
 }

server.js

@@ -0,0 +1,3 @@
+module.exports = {
+    use: ["autoprefixer"]
+};

src/styles/postcss.config.js

@@ -25,7 +25,7 @@
   },
   "awesomeTypescriptLoaderOptions": {
     "useCache": true,
-    "cacheDirectory": "./build/awCache"
+    "cacheDirectory": "./.awCache"
   },
   "include": [
     "src",