production

package.json

@@ -2,7 +2,10 @@
   "name": "spirit-tail",
   "description": "Djvon's Cocktail React App",
   "scripts": {
-    "start": "webpack-dev-server --config webpack.config.dev.js --port 3001"
+    "start": "webpack-dev-server --config webpack.config.dev.js --port 3001",
+    "clean:build": "rimraf ./build && mkdir build",
+    "prebuild": "clean:build",
+    "build": "webpack --config webpack.config.prod.js"
   },
   "dependencies": {
     "bootstrap": "4.3.1",

src/App.js

@@ -4,7 +4,7 @@ import Detail from "./Components/Detail.js";
 import TheList from "./Components/TheList.js";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import { Provider } from "react-redux";
-import store from "./Components/redux/drinkStore";
+import store from "./Components/redux/drinkStore.dev";
 
 const App = () => {
   return (

src/Components/redux/drinkStore.dev.js

@@ -0,0 +1,7 @@
+import { createStore, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+import reducer from "./drinksReducer";
+
+const store = createStore(reducer, applyMiddleware(thunk));
+
+export default store;

src/Components/redux/drinkStore.js

@@ -1,7 +1,5 @@
-import { createStore, applyMiddleware } from "redux";
-import thunk from "redux-thunk";
-import reducer from "./drinksReducer";
-
-const store = createStore(reducer, applyMiddleware(thunk));
-
-export default store;
+if (process.NODE_ENV === "production") {
+  module.exports = require("./drinkStore.prod");
+} else {
+  module.exports = require("./drinkStore.dev");
+}

src/Components/redux/drinkStore.prod.js

@@ -0,0 +1,7 @@
+import { createStore, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+import reducer from "./drinksReducer";
+
+const store = createStore(reducer, applyMiddleware(thunk));
+
+export default store;

webpack.config.prod.js

@@ -0,0 +1,74 @@
+const webpack = require("webpack");
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpackBundleAnalyzer = require("webpack-bundle-analyzer");
+
+process.env.NODE_ENV = "production";
+
+module.exports = {
+  mode: "production",
+  target: "web",
+  devtool: "source-map",
+  entry: "./src/index",
+  output: {
+    path: path.resolve(__dirname, "build"),
+    publicPath: "/",
+    filename: "bundle.js",
+  },
+  plugins: [
+    new webpackBundleAnalyzer.BundleAnalyzerPlugin({ analyzerMode: "static" }),
+
+    new MiniCssExtractPlugin({
+      filename: "[name].[contenthash].css",
+    }),
+
+    new webpack.DefinePlugin({
+      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
+      "process.env.API_URL": JSON.stringify("http://localhost:3001"),
+    }),
+    new HtmlWebpackPlugin({
+      template: "src/index.html",
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeRedundantAttributes: true,
+        useShortDoctype: true,
+        removeEmptyAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        keepClosingSlash: true,
+        minifyJS: true,
+        minifyCSS: true,
+        minifyURLs: true,
+      },
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ["babel-loader", "eslint-loader"],
+      },
+      {
+        test: /(\.css)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              sourceMap: true,
+            },
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              plugins: () => [require("cssnano")],
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+};