Minify JS, CSS, and HTML in production

- Extracted CSS into own file in production - Minified CSS in production - Added TerserJS back in to minify JS in production - Minified HTML in production as well
Add entrypoint for vendor js file, add bootstrap js
2019-03-05 21:02:05 -08:00 · 2019-03-05 18:37:07 -08:00 · 2019-03-05 18:13:21 -08:00 · 2019-03-05 17:24:01 -08:00 · 2019-03-05 15:24:55 -08:00 · 2019-03-05 15:00:12 -08:00
17 changed files with 8394 additions and 55 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+dist
--- a/index.html
+++ b/index.html
@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link
-      rel="stylesheet"
-      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
-      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
-      crossorigin="anonymous"
-    />
-    <title>Webpack Demo</title>
-  </head>
-  <body class="container">
-    <h1 class="text-center mt-5">
-      Welcome!
-    </h1>
-    <div class="alert alert-danger" id="error" role="alert"></div>
-    <div class="row mt-5">
-      <div class="col">
-        <div class="input-group">
-          <input type="text" id="numberOne" class="form-control" />
-          <div class="input-group-append input-group-prepend">
-            <span class="input-group-text">+</span>
-          </div>
-          <input type="text" id="numberTwo" class="form-control" />
-        </div>
-      </div>
-      <div class="col">
-        <button id="addValues" class="btn btn-primary">Add Values</button>
-      </div>
-    </div>
-    <div class="card mt-5">
-      <div class="card-body">The result is: <span id="result"></span></div>
-    </div>
-    <img src="./assets/webpack.svg" />
-  </body>
-  <script src="./src/app/alert.service.js"></script>
-  <script src="./src/app/component.service.js"></script>
-  <script src="./src/app/utils/inputs-are-valid.js"></script>
-  <script src="./src/app/utils/parse-inputs.js"></script>
-  <script src="./src/app/app.js"></script>
-</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,35 @@
+{
+  "name": "code",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server  --config webpack.dev.js --open",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "bootstrap": "^4.3.1",
+    "css-loader": "^2.1.0",
+    "file-loader": "^3.0.1",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "jquery": "^3.3.1",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.11.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "popper.js": "^1.14.7",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1",
+    "webpack-merge": "^4.2.1"
+  },
+  "dependencies": {
+    "clean-webpack-plugin": "^2.0.0"
+  }
+}
--- a/src/app/alert.service.js
+++ b/src/app/alert.service.js
@ -1,4 +1,5 @@
-class AlertService {
+import { inputsAreValid } from "./utils/inputs-are-valid";
+export class AlertService {
  constructor() {
    this.errorBox = document.getElementById("error");
  }
--- a/src/app/app.js
+++ b/src/app/app.js
@ -1,6 +1,6 @@
-const alertService = new AlertService();
-const componentService = new ComponentService();
-const run = (alertService, componentService) => {
+import { inputsAreValid } from "./utils/inputs-are-valid";
+import { parseInputs } from "./utils/parse-inputs";
+export const run = (alertService, componentService) => {
  alertService.hideErrors();

  componentService.onClick(() => {
@ -16,4 +16,3 @@ const run = (alertService, componentService) => {
    }
  });
 };
-run(alertService, componentService);
--- a/src/app/component.service.js
+++ b/src/app/component.service.js
@ -1,4 +1,4 @@
-class ComponentService {
+export class ComponentService {
  constructor() {
    this.numberOneInput = document.getElementById("numberOne");
    this.numberTwoInput = document.getElementById("numberTwo");
--- a/src/app/utils/inputs-are-valid.js
+++ b/src/app/utils/inputs-are-valid.js
@ -1,3 +1,3 @@
-const inputsAreValid = (...input) => {
+export const inputsAreValid = (...input) => {
  return input.every(num => typeof num === "number" && !isNaN(num));
 };
--- a/src/app/utils/parse-inputs.js
+++ b/src/app/utils/parse-inputs.js
@ -1,3 +1,3 @@
-const parseInputs = (...input) => {
+export const parseInputs = (...input) => {
  return input.map(str => parseInt(str));
 };
--- a/src/assets/webpack.svg
+++ b/src/assets/webpack.svg
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,8 @@
+import { run } from "./app/app";
+import "./main.scss";
+import { AlertService } from "./app/alert.service";
+import { ComponentService } from "./app/component.service";
+const alertService = new AlertService();
+const componentService = new ComponentService();
+run(alertService, componentService);
+console.log("J");
--- a/src/main.scss
+++ b/src/main.scss
@ -0,0 +1,3 @@
+$primary: teal;
+$danger: purple;
+@import "~bootstrap/scss/bootstrap";
--- a/src/template.html
+++ b/src/template.html
@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Webpack Demo</title>
+  </head>
+  <body class="container">
+    <!-- Bootstrap Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+      <a class="navbar-brand" href="#">Navbar</a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navbarNav"
+        aria-controls="navbarNav"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
+          <li class="nav-item active">
+            <a class="nav-link" href="#"
+              >Home <span class="sr-only">(current)</span></a
+            >
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Features</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Pricing</a>
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link disabled"
+              href="#"
+              tabindex="-1"
+              aria-disabled="true"
+              >Disabled</a
+            >
+          </li>
+        </ul>
+      </div>
+    </nav>
+    <h1 class="text-center mt-5">
+      Welcome!
+    </h1>
+
+    <div class="alert alert-danger" id="error" role="alert"></div>
+    <div class="row mt-5">
+      <div class="col">
+        <div class="input-group">
+          <input type="text" id="numberOne" class="form-control" />
+          <div class="input-group-append input-group-prepend">
+            <span class="input-group-text">+</span>
+          </div>
+          <input type="text" id="numberTwo" class="form-control" />
+        </div>
+      </div>
+      <div class="col">
+        <button id="addValues" class="btn btn-primary">Add Values</button>
+      </div>
+    </div>
+    <div class="card mt-5">
+      <div class="card-body">The result is: <span id="result"></span></div>
+    </div>
+    <img src="./assets/webpack.svg" />
+  </body>
+</html>
--- a/src/vendor.js
+++ b/src/vendor.js
@ -0,0 +1 @@
+import "bootstrap";
--- a/webpack.common.js
+++ b/webpack.common.js
@ -0,0 +1,27 @@
+const path = require("path");
+var HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: {
+    main: "./src/index.js",
+    vendor: "./src/vendor.js"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        use: ["html-loader"]
+      },
+      {
+        test: /\.(svg|png|jpg|gif)$/,
+        use: {
+          loader: "file-loader",
+          options: {
+            name: "[name].[hash].[ext]",
+            outputPath: "imgs"
+          }
+        }
+      }
+    ]
+  }
+};
--- a/webpack.dev.js
+++ b/webpack.dev.js
@ -0,0 +1,29 @@
+const path = require("path");
+const common = require("./webpack.common");
+const merge = require("webpack-merge");
+var HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = merge(common, {
+  mode: "development",
+  output: {
+    filename: "[name].bundle.js",
+    path: path.resolve(__dirname, "dist")
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./src/template.html"
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          "style-loader", //3. Inject styles into DOM
+          "css-loader", //2. Turns css into commonjs
+          "sass-loader" //1. Turns sass into css
+        ]
+      }
+    ]
+  }
+});
--- a/webpack.prod.js
+++ b/webpack.prod.js
@ -0,0 +1,46 @@
+const path = require("path");
+const common = require("./webpack.common");
+const merge = require("webpack-merge");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+var HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = merge(common, {
+  mode: "production",
+  output: {
+    filename: "[name].[contentHash].bundle.js",
+    path: path.resolve(__dirname, "dist")
+  },
+  optimization: {
+    minimizer: [
+      new OptimizeCssAssetsPlugin(),
+      new TerserPlugin(),
+      new HtmlWebpackPlugin({
+        template: "./src/template.html",
+        minify: {
+          removeAttributeQuotes: true,
+          collapseWhitespace: true,
+          removeComments: true
+        }
+      })
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }),
+    new CleanWebpackPlugin()
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader, //3. Extract css into files
+          "css-loader", //2. Turns css into commonjs
+          "sass-loader" //1. Turns sass into css
+        ]
+      }
+    ]
+  }
+});
Author	SHA1	Message	Date
Colt Steele	991f703d05	Minify JS, CSS, and HTML in production - Extracted CSS into own file in production - Minified CSS in production - Added TerserJS back in to minify JS in production - Minified HTML in production as well	2019-03-05 21:02:05 -08:00
Colt Steele	34e7d30aef	Add entrypoint for vendor js file, add bootstrap js - Now we have 2 entry files and 2 bundles - The vendor file houses code that is less likely to change, 3rd party libraries - The main file has all of our app code	2019-03-05 18:37:07 -08:00
Colt Steele	947290016d	Add html-loader, file-loader, and clean-webpack-plugin - Added html-loader to automatically require the files we reference in img tags - Added file-loader to handle the svg,png,jpg,gif files from our images - Configured file-loader to add our images to an imgs directory in dist - Also configured it to add a hash to their filenames - Lastly, added clean-webpack-plugin to our production config to clean out the dist directory each time we build	2019-03-05 18:13:21 -08:00
Colt Steele	eb66c0dc93	Add prod and dev configs, dev-server - Broke our webpack.config file into 3 files - webpack.common.js, webpack.dev.js, and webpack.prod.js - installed webpack-merge to share the common functionality - updated our package.json to use the new config files - installed webpack-dev-server and added it to start script in package.json	2019-03-05 17:24:01 -08:00
Colt Steele	c932911657	Cache busting and HtmlWebpackPlugin - Configured webpack to use contentHash in bundle file name - This caused a problem with out script tag in index.html - We installed HtmlWebpackPlugin to help us generate a new index.html - It automatically includes the correct script tag at the bottom - We created a template file that we passed in called template.html - We deleted the original index.html because we don't need it anymore - Make sure you are opening dist/index.html now to view the app	2019-03-05 15:24:55 -08:00
Colt Steele	21c9e3b623	Add Sass loader, override bootstrap colors - Changed our main.css to main.scss - Installed bootstrap locally so we can tweak it - Installed sass-loader and node-sass - Updated webpack.config file to include a .scss rule	2019-03-05 15:00:12 -08:00
Colt Steele	65c2ac4709	Add first loaders to handle css - Installed style-loader and css-loader - Configured webpack.config to use both loaders on css files - Remember the order we use them in webpack.config matters	2019-03-05 14:50:31 -08:00
Colt Steele	d13f75ab6c	Add webpack config file - Created webpack.config.js - Added some basic configuration - Modified package.json, so that webpack uses our config file	2019-03-05 11:48:38 -08:00
Colt Steele	2b11dd3624	Webpack now bundling all our app code - We use import/export to indicate dependencies - Webpack makes sure everything loads in the correct order - We can remove all our additional script tags in index.html	2019-03-05 11:18:36 -08:00
Colt Steele	2400d188ea	Installed webpack - Installed webpack and webpack-cli - Added a start script in package.json which calls webpack - Made an index.js file, which is the file webpack looks for by default - Webpack spits out our code in dist/main.js by default - Currently our main app code has nothing to do with webpack, but it will soon	2019-03-04 23:09:36 -08:00