Split webpack configs and share common settings with webpack-merge (#3)

package.json

@@ -6,8 +6,8 @@
   "license": "MIT",
   "author": "Microsoft",
   "scripts": {
-    "build": "webpack",
-    "start": "webpack-dev-server",
+    "build": "webpack --config webpack.prod.js",
+    "start": "webpack-dev-server --config webpack.dev.js",
     "start:server": "tinylicious",
     "start:test": "webpack-dev-server --config webpack.test.js",
     "test": "jest"

webpack.common.js

@@ -0,0 +1,20 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+module.exports = {
+    resolve: {
+        extensions: [".ts", ".js"],
+    },
+    module: {
+        rules: [{
+            test: /\.tsx?$/,
+            loader: "ts-loader"
+        }]
+    },
+    output: {
+        filename: "[name].[contenthash].js",
+    },
+    devtool: "inline-source-map",
+};

webpack.config.js

@@ -1,33 +0,0 @@
-const path = require("path");
-const merge = require("webpack-merge");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-
-module.exports = () => {
-    return ({
-        entry: {
-            app: "./src/app.ts"
-        },
-        resolve: {
-            extensions: [".ts", ".js"],
-        },
-        module: {
-            rules: [{
-                test: /\.ts?$/,
-                loader: "ts-loader"
-            }]
-        },
-        output: {
-            filename: "[name].[contenthash].js",
-            path: path.resolve(__dirname, "dist"),
-        },
-        plugins: [
-            new CleanWebpackPlugin(),
-            new HtmlWebpackPlugin({
-                template: "./src/index.html",
-            }),
-        ],
-        mode: "development",
-        devtool: "inline-source-map"
-    });
-};

webpack.dev.js

@@ -0,0 +1,20 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+const merge = require("webpack-merge");
+const common = require("./webpack.common");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = merge(common, {
+    entry: {
+        app: "./src/app.ts"
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: "./src/index.html",
+        }),
+    ],
+    mode: "development",
+});

webpack.prod.js

@@ -0,0 +1,22 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+const merge = require("webpack-merge");
+const common = require("./webpack.common");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+
+module.exports = merge(common, {
+    entry: {
+        app: "./src/app.ts"
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new HtmlWebpackPlugin({
+            template: "./src/index.html",
+        }),
+    ],
+    mode: "production",
+});

webpack.test.js

@@ -3,43 +3,18 @@
  * Licensed under the MIT License.
  */
 
-const path = require("path");
 const merge = require("webpack-merge");
+const common = require("./webpack.common");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
-module.exports = env => {
-    return ({
-        entry: {
-            app: "./test/index.ts"
-        },
-        resolve: {
-            extensions: [".ts", ".js"],
-        },
-        module: {
-            rules: [{
-                test: /\.tsx?$/,
-                loader: "ts-loader"
-            },
-            {
-                test: /\.css$/i,
-                use: ['style-loader', 'css-loader'],
-            }]
-        },
-        output: {
-            filename: "[name].bundle.js",
-            path: path.resolve(__dirname, "dist"),
-            library: "[name]",
-            // https://github.com/webpack/webpack/issues/5767
-            // https://github.com/webpack/webpack/issues/7939
-            devtoolNamespace: "fluid-example/hello-world",
-            libraryTarget: "umd"
-        },
-        plugins: [
-            new HtmlWebpackPlugin({
-                template: "./test/index.html",
-            }),
-        ],
-        mode: "development",
-        devtool: "inline-source-map"
-    });
-};
+module.exports = merge(common, {
+    entry: {
+        app: "./test/index.ts"
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: "./test/index.html",
+        }),
+    ],
+    mode: "development",
+});