From c6aa313839f47667d61e754d0b030170b3e4b0fb Mon Sep 17 00:00:00 2001
From: androiddrew <bednar.andrew@gmail.com>
Date: Thu, 4 Jan 2018 15:38:21 -0500
Subject: [PATCH] Minimal webpack workflow created

---
 README.md            | 15 +++++++++++++++
 dist/.gitignore      |  1 +
 index.html           |  3 +--
 package.json         |  7 ++++++-
 app.js => src/app.js |  2 +-
 webpack.config.js    |  8 ++++----
 6 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 README.md
 create mode 100644 dist/.gitignore
 rename app.js => src/app.js (68%)

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..615da42
--- /dev/null
+++ b/README.md
@@ -0,0 +1,15 @@
+# Vuejs and webpack
+
+## Installation
+
+`npm install`
+
+## Build
+
+To bundle your js code simply use the below command
+
+`npm start`
+
+Alternatively you could return
+
+`node_modules/.bin/webpack --config webpack.config.js`
diff --git a/dist/.gitignore b/dist/.gitignore
new file mode 100644
index 0000000..0e804e3
--- /dev/null
+++ b/dist/.gitignore
@@ -0,0 +1 @@
+bundle.js
diff --git a/index.html b/index.html
index a6e25fc..c5ab1a6 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,6 @@
     <div id="app" v-cloak>
       {{message}}
     </div>
-    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
-    <script type="text/javascript" src="app.js"></script>
+    <script type="text/javascript" src="dist/bundle.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
index a7e7fdc..41983b3 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,16 @@
   "description": "Example project using webpack with vuejs",
   "main": "app.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "node_modules/.bin/webpack --config webpack.config.js"
   },
   "author": "drew@androiddrew.com",
   "license": "MIT",
   "dependencies": {
     "vue": "^2.5.13"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "webpack": "^3.10.0"
   }
 }
diff --git a/app.js b/src/app.js
similarity index 68%
rename from app.js
rename to src/app.js
index 04a8083..87308dd 100644
--- a/app.js
+++ b/src/app.js
@@ -1,5 +1,5 @@
 // app.js
-// import Vue from './node_modules/vue/dist/vue.esm.browser.js'
+import Vue from '../node_modules/vue/dist/vue.esm.browser.js'
 
 const app = new Vue({
   el: '#app',
diff --git a/webpack.config.js b/webpack.config.js
index 9cf6093..9406d02 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,18 +1,18 @@
 module.exports = {
   // Entry file
-  entry: './app.js',
+  entry: './src/app.js',
   output: {
     //output bundle
-    filename: 'bundle.js'
+    filename: './dist/bundle.js'
   },
-  modules: {
+  module: {
     rules: [
       {
         // For .js files
         test: /\.js$/,
         use: {
           // Use the babel loader
-          loader: 'bable-loader'
+          loader: 'babel-loader'
         }
       }
     ]