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();
+import { inputsAreValid } from "./utils/inputs-are-valid";
-const componentService = new ComponentService();
+import { parseInputs } from "./utils/parse-inputs";
-const run = (alertService, componentService) => {
+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