Feedback

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ]
+}

.eslintignore

@@ -0,0 +1,3 @@
+webpack.config.js
+node_modules
+build

.eslintrc

@@ -0,0 +1,22 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 9,
+    "sourceType": "module"
+  },
+  "extends": "airbnb-base",
+  "globals": {
+    "document": true,
+    "window": true,
+    "$": true,
+    "XMLHttpRequest": true,
+    "allowTemplateLiterals": true
+  },
+  "rules": {
+    "no-console": [1, { "allow": ["error", "warn"] }],
+    "comma-dangle": ["error", "only-multiline"],
+    "no-debugger": 1,
+    "class-methods-use-this": 0,
+    "linebreak-style": 0,
+    "max-len": [1,200,2]
+  }
+}

.gitignore

@@ -0,0 +1,7 @@
+.vscode/
+.DS_Store
+package-lock.json
+node_modules/
+dist/
+build/
+.firebase/

README copy.md

@@ -0,0 +1,81 @@
+# Webpack Intro
+
+[See Live Demo](https://webpack-temp.netlify.app/)
+
+Webpack is a task runner and a module bundler. It originally started as a module bundler. This means that it takes all of your separate Javascript modules and bundles them together into a single file. Webpack also automates some of the tasks that we have to run every time we change the code. It will automate these tasks so that we are not typing in the same commands every single time.
+
+- Visit the [Webpack documentation](https://webpack.js.org/concepts/) if you want to explore more.
+- [Info on our Webpack Config](https://github.com/nss-nightclass-projects/Night-Class-Resources/blob/master/book-2-patterns-and-tools/chapters/webpack-configure.md)
+
+## Get Started
+
+### Use Template
+#### 1. To get started, click the GREEN "Use this Template" button at the top of the repo
+![Use this Template](./documentation/usetemplate.png)
+
+#### 2. Make sure YOUR github account is selected in the dropdown and name your project
+![Create Project](./documentation/createproject.png)
+
+3. Click the **GREEN** "Create repository from template" button
+4. Clone your new repo to your local machine
+5. Start working!
+
+## Starting the Project
+1. Open the `package.json` file and change the `name` property to the name of your application, and `author` to  your name.
+1. From your command line, be in the root directory and run `npm install` OR `npm i` for short.
+1. To start your application, run `npm start`
+
+### If you see this, you are set to go!
+![LIT](./documentation/lit-screen.png)
+
+**NOTE:** Changes you make to the project will make the browser reload on save...no more hard refresh unless something goes wrong.
+
+## Other Important Tidbits
+### Console messages
+From this time forward, you will be expected to have a clean console in order for your assignments to be approved. This means that the use of `console.log` is acceptable **_(debugger is WAY better though)_** while developing, but will throw a warning in your console like the image below, but all `logs` will have to be removed. You may use `console.error` and `console.warn` in your code however.
+
+![not acceptable](./documentation/notacceptable.png)
+
+### Including Images with Webpack
+If you have a folder of local images that you want to load into your code things get a little strange with webpack.  Remember the only way webpack knows about assets is if they are imported into your javascript files.  Even our CSS is not added until those files are imported into our javascript files.  Below is some sample code for how to load a local image file into your project
+
+```js
+import cat from './assets/cat.jpg';
+
+let domString = `<img src=${cat} alt="picture of a cat"/>`;
+
+document.getElementById('cat').innerHTMl = domString;
+```
+
+### Importing CSS/SCSS
+```js
+import '../styles/main.scss';
+
+const init = () => {
+  $('#app').html('<h1>HELLO! You are up and running!</h1>');
+  console.log('YOU ARE UP AND RUNNING!');
+};
+
+init();
+```
+
+### Using Axios
+> For every file you will need to make an XHR request in, you will need to require Axios
+```js
+import axios from 'axios';
+
+const examplePromise = () => {
+  axios.get('http://localhost:3001/example')
+    .then((data) => {
+      console.warn(data);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+});
+```
+
+### Deploying on Netlify
+
+- Build Command: `npm run build`
+- Publish directory: `build`

README.md

@@ -34,7 +34,7 @@ cd [repo name]
 1. If the user unchecks the box, the background color should change back to white with black text for messages.
 
 ### Messages
-1. When the page is first loaded, you must load 5 messages from a local JSON file and pre-fill a message area `<div>` below the input field that will also hold all new messages as they get created.
+1. When the page is first loaded, you must load 5 messages from a module file and pre-fill a message area `<div>` below the input field that will also hold all new messages as they get created.
 1. When the user presses the return key in the message field, the new message should be inserted into the message area.
 1. The message should have a button displayed after it with the text "Delete" inside of it.
 1. When the delete button next to a message is clicked, only that message should be removed from the DOM.
@@ -44,8 +44,8 @@ cd [repo name]
 Create multiple modules, following the Single Responsibility Principle, that perform the following functions.
 
 1. One module should load the seed data file and returns the array of objects.
-1. One module should contain a function that accepts an element `id`, and the user message, and then add the user's message - along with the delete button - to the specified parent element. Each message should be stored in a private array in this IIFE. This IIFE should also expose a function to read all messages, and delete a single message.
-1. One module should accept a message element `id` and then remove the correct element from the DOM. This module should also remove the corresponding message from the private array that was created in the previous IIFE.
+1. One module should contain a function that accepts an element `id`, and the user message, and then add the user's message - along with the delete button - to the specified parent element. Each message should be stored in a private array in this module. This module should also expose a function to read all messages, and delete a single message.
+1. One module should accept a message element `id` and then remove the correct element from the DOM. This module should also remove the corresponding message from the private array that was created in the previous module.
 
 ## Helpful hints
 

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "webpack-intro",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/javascripts/main.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode development --open",
+    "build": "webpack --mode production --module-bind js=babel-loader"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "7.11.4",
+    "@babel/preset-env": "7.11.0",
+    "babel-loader": "8.1.0",
+    "css-loader": "4.2.2",
+    "eslint": "7.7.0",
+    "eslint-config-airbnb-base": "14.2.0",
+    "eslint-loader": "4.0.2",
+    "eslint-plugin-import": "2.22.0",
+    "file-loader": "6.0.0",
+    "html-loader": "1.3.0",
+    "html-webpack-plugin": "4.3.0",
+    "mini-css-extract-plugin": "0.10.0",
+    "node-sass": "4.14.1",
+    "sass-loader": "10.0.1",
+    "webpack": "4.44.1",
+    "webpack-cli": "3.3.12",
+    "webpack-dev-server": "3.11.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "5.14.0",
+    "axios": "0.20.0",
+    "bootstrap": "4.5.2",
+    "jquery": "3.5.1",
+    "popper.js": "1.16.1"
+  }
+}

src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Test</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/javascripts/main.js

@@ -0,0 +1 @@
+import '../styles/main.scss';

src/styles/main.scss

@@ -0,0 +1,9 @@
+@import "~bootstrap/scss/bootstrap";
+@import "~@fortawesome/fontawesome-free/css/all.min.css";
+
+body {
+  background-color: antiquewhite;
+  color: brown;
+  text-align: center;
+  margin-top: 100px;
+}

webpack.config.js

@@ -0,0 +1,70 @@
+const webpack = require('webpack');
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+module.exports = {
+  entry: './src/javascripts/main.js',
+  devtool: "eval-source-map",
+  module: {
+    rules: [
+      {
+        enforce: "pre",
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: "eslint-loader",
+	options: {
+          formatter: require('eslint/lib/cli-engine/formatters/stylish')
+        }
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader"
+        }
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: "html-loader",
+            options: { minimize: true }
+          }
+        ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+            { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } },
+            { loader: 'sass-loader', options: { sourceMap: true } },
+        ],
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        use: ['file-loader']
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        use: ['file-loader']
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: "./src/index.html",
+      filename: "./index.html"
+    }),
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+      chunkFilename: "[id].css"
+    }),
+    new webpack.ProvidePlugin({
+      $: "jquery",
+      jQuery: "jquery"
+    })
+  ],
+  output: {
+		path: __dirname + "/build",
+		filename: "bundle.js"
+	}
+};