move to webpack

devfake · Jun 23, 2016 · 654ff78 · 654ff78
1 parent 4b901da
commit 654ff78
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ It's build on top of [Laravel](https://www.laravel.com) and [Vue.js](http://vuej
 ##### Development
 
 * Run `npm install` in your `/client` folder.
-* Run `gulp watch` or `gulp watch --production` and make your work.
+* Run `webpack`, or `webpack -p` for production build. You can watch your assets with `webpack -w`.
 
 ### Misc
 

diff --git a/client/.babelrc b/client/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false
+}
diff --git a/client/app/app.js b/client/app/app.js
@@ -1,3 +1,5 @@
+require('../resources/sass/app.scss');
+
 import Vue from 'vue';
 import Resource from 'vue-resource';
 

diff --git a/client/app/components/nav.vue b/client/app/components/nav.vue
@@ -21,7 +21,7 @@
         <span class="nav-item nav-history" :class="{active: subNav === 'history'}" @click="changeSubNav('history')"><span>history</span></span>
         <span class="nav-item">
           <span class="attribution">
-            <a target="_blank" href="https://soundcloud.com/"><img src="assets/img/powered_by_soundcloud.png" width="104" height="32" alt="powered by: SOUNDCLOUD"></a>
+            <a target="_blank" href="https://soundcloud.com/"><img src="../../../public/assets/img/powered_by_soundcloud.png" width="104" height="32" alt="powered by: SOUNDCLOUD"></a>
           </span>
         </span>
         <span class="nav-item second-nav-item">

diff --git a/client/gulpfile.js b/client/gulpfile.js
diff --git a/client/package.json b/client/package.json
@@ -1,21 +1,31 @@
 {
   "private": true,
   "scripts": {
+    "install:test": "npm install nightwatch selenium-server chromedriver",
     "e2e": "./node_modules/.bin/nightwatch"
   },
   "dependencies": {
     "nouislider": "^8.5.1",
-    "vue": "^1.0.24",
-    "vue-resource": "^0.7.2",
+    "vue": "^1.0.25",
+    "vue-resource": "^0.8.0",
     "vuex": "^0.6.3"
   },
   "devDependencies": {
-    "chromedriver": "^2.21.2",
+    "babel-core": "^6.10.4",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-runtime": "^6.9.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-stage-2": "^6.5.0",
+    "css-loader": "^0.23.1",
     "d3": "^3.5.17",
-    "gulp": "^3.9.1",
-    "laravel-elixir": "^6.0.0-2",
-    "laravel-elixir-vueify": "^1.0.3",
-    "nightwatch": "^0.9.4",
-    "selenium-server": "^2.53.0"
+    "file-loader": "^0.9.0",
+    "node-sass": "^3.8.0",
+    "sass-loader": "^3.2.1",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "vue-html-loader": "^1.2.3",
+    "vue-loader": "^8.5.3",
+    "vue-style-loader": "^1.0.0",
+    "webpack": "^1.13.1"
   }
 }
diff --git a/client/resources/app.blade.php b/client/resources/app.blade.php
@@ -10,7 +10,7 @@
   <title>cloudradioo | Discover New Music</title>
 
   <link href="{{ url('assets/favicon.ico?v=1') }}" rel="icon" type="image/x-icon">
-  <link href="{{ url('assets/css/app.css') }}" rel="stylesheet">
+  {{-- <link href="{{ url('assets/css/app.css') }}" rel="stylesheet"> --}}
 
 </head>
 <body>
@@ -25,6 +25,7 @@
 
   </div>
 
+  <script src="{{ url('assets/js/vendor.js') }}"></script>
   <script src="{{ url('assets/js/app.js') }}"></script>
 </body>
 </html>
diff --git a/client/resources/sass/_base.scss b/client/resources/sass/_base.scss
@@ -14,8 +14,7 @@ input { outline: none; }
 .no-select { user-select: none; }
 
 body {
-  //background: url(../img/pattern.png) #1e1f42;
-  background: url(../img/pattern.png) #d59657;
+  background: url(../../../public/assets/img/pattern.png) #d59657;
   overflow: hidden;
   font-family: 'Slabo 27px', serif;
 }

diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -0,0 +1,45 @@
+// todo
+// - extract css
+// - HOT
+// - production env
+
+let webpack = require('webpack');
+
+module.exports = {
+  entry: {
+    app: './app/app.js',
+    vendor: ['vue', 'vue-resource', 'vuex', 'd3']
+  },
+  output: {
+    filename: '../public/assets/js/app.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|svg)$/,
+        loader: 'url',
+        query: {
+          limit: 10000,
+          name: 'assets/img/[name].[ext]',
+          emitFile: false
+        }
+      },
+      {
+        test: /\.scss$/,
+        loader: 'style!css!sass'
+      }
+    ]
+  },
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin('vendor', '../public/assets/js/vendor.js')
+  ]
+};
diff --git a/public/assets/css/app.css b/public/assets/css/app.css