Re-organize webpack config into common, dev and prod configs

Author: cmfcmf

.travis.yml

@@ -15,7 +15,7 @@ script:
   - yarn run lint
 
 before_deploy:
-  - yarn run webpack --mode production
+  - yarn run build
 
 deploy:
   provider: pages

dist/index.html

@@ -13,6 +13,6 @@
 <div id="game"></div>
 <p id="version"></p>
 <p id="about">Made by <a href="https://github.com/cmfcmf">Christian Flach</a>.</p>
-<script src="main.js"></script>
+<script src="app.bundle.js"></script>
 </body>
 </html>

package.json

@@ -47,11 +47,12 @@
     "uglifyjs-webpack-plugin": "^1.2.6",
     "webpack": "^4.12.0",
     "webpack-cli": "^3.0.3",
-    "webpack-dev-server": "^3.1.4"
+    "webpack-dev-server": "^3.1.4",
+    "webpack-merge": "^4.1.3"
   },
   "scripts": {
-    "start": "webpack-dev-server --host 0.0.0.0",
-    "build": "webpack",
+    "start": "webpack-dev-server --host 0.0.0.0 --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js",
     "lint": "tslint --project .",
     "test": "jest",
     "test-watch": "jest --notify --watchAll",

webpack.common.js

@@ -0,0 +1,56 @@
+const path = require("path");
+const webpack = require("webpack");
+const GitRevisionPlugin = require("git-revision-webpack-plugin");
+const gitRevisionPlugin = new GitRevisionPlugin({
+    // branch: true,
+});
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+
+/* tslint:disable */
+module.exports = {
+    entry: {
+        app: [
+           "idb.filesystem.js",
+            "@babel/polyfill",
+            "./src/index.ts",
+        ],
+    },
+    plugins: [
+        gitRevisionPlugin,
+        new webpack.DefinePlugin({
+            '__VERSION__': JSON.stringify(gitRevisionPlugin.version()),
+            // '__COMMITHASH__': JSON.stringify(gitRevisionPlugin.commithash()),
+            // '__BRANCH__': JSON.stringify(gitRevisionPlugin.branch()),
+        }),
+        new CopyWebpackPlugin([
+            {from: "./node_modules/smk2mp4/demo/ffmpeg.js", to: 'ffmpeg.js'},
+            {from: "./node_modules/smk2mp4/demo/ffmpeg.js.mem", to: 'ffmpeg.js.mem'},
+        ]),
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: [
+                    {
+                        loader: "babel-loader",
+                        options: {
+                            presets: ['@babel/preset-env']
+                        },
+                    },
+                    {
+                        loader: "ts-loader",
+                    },
+                ],
+                exclude: /node_modules/,
+            },
+        ],
+    },
+    resolve: {
+        extensions: [".tsx", ".ts", ".js"],
+    },
+    output: {
+        filename: "[name].bundle.js",
+        path: path.resolve(__dirname, "dist"),
+    },
+};

webpack.config.js

@@ -0,0 +1,16 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+const webpack = require("webpack");
+
+module.exports = merge(common, {
+    mode: "development",
+    devtool: "inline-source-map",
+    devServer: {
+        contentBase: "./dist",
+        hot: true,
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+    ]
+});

webpack.dev.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: "production",
+    devtool: "source-map",
+});

webpack.prod.js

@@ -6523,6 +6523,12 @@ webpack-log@^1.0.1, webpack-log@^1.1.2:
     loglevelnext "^1.0.1"
     uuid "^3.1.0"
 
+webpack-merge@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.3.tgz#8aaff2108a19c29849bc9ad2a7fd7fce68e87c4a"
+  dependencies:
+    lodash "^4.17.5"
+
 webpack-sources@^1.0.1, webpack-sources@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"