Minimal webpack workflow created

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`

dist/.gitignore

@@ -0,0 +1 @@
+bundle.js

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>

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"
   }
 }

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',

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'
         }
       }
     ]