Merge pull request #4 from mcfarljw/webpack-4

Webpack 4

lib/plugins/pug.js

@@ -1,7 +1,15 @@
 module.exports = function (config) {
   config.module.rules.push({
     test: /\.pug$/,
-    loader: 'pug-loader'
+    oneOf: [
+      {
+        resourceQuery: /^\?vue/,
+        use: ['pug-plain-loader']
+      },
+      {
+        use: 'pug-loader'
+      }
+    ]
   })
 
   config.resolve.extensions.push('.pug')

lib/plugins/stylus.js

@@ -1,6 +1,6 @@
 module.exports = function (config) {
   config.module.rules.push({
-    test: /\.styl$/,
+    test: /\.styl(us)?$/,
     use: [
       'vue-style-loader',
       'css-loader',

package.json

@@ -54,18 +54,18 @@
     "progress-bar-webpack-plugin": "1.11.x",
     "pug": "2.0.x",
     "pug-loader": "2.4.x",
+    "pug-plain-loader": "1.0.x",
     "raw-loader": "0.5.x",
     "sass-loader": "7.0.x",
     "string-replace-loader": "2.1.x",
-    "style-loader": "0.21.x",
     "stylus": "0.54.x",
     "stylus-loader": "3.0.x",
     "url-loader": "1.0.x",
-    "vue-loader": "14.2.x",
+    "vue-loader": "15.2.x",
     "vue-style-loader": "4.1.x",
     "vue-template-compiler": "2.5.x",
-    "webpack": "3.11.x",
-    "webpack-dev-middleware": "2.0.x",
+    "webpack": "4.16.x",
+    "webpack-dev-middleware": "3.1.x",
     "webpack-hot-middleware": "2.22.x",
     "webpack-merge": "4.1.x",
     "worker-loader": "2.0.x"
@@ -83,7 +83,6 @@
     "eslint-plugin-promise": "3.8.x",
     "eslint-plugin-standard": "3.1.x",
     "husky": "0.14.x",
-    "phaser": "3.x.x",
     "shelljs": "0.8.x",
     "vue": "2.5.x",
     "vue-router": "3.0.x",

src/main.js

@@ -1,5 +1,4 @@
 import 'vuetify/dist/vuetify.min.css'
-import Phaser from 'phaser'
 import Vue from 'vue'
 import Vuetify from 'vuetify'
 import VuexRouterSync from 'vuex-router-sync'
@@ -13,14 +12,12 @@ Vue.use(Vuetify)
 VuexRouterSync.sync(store, router)
 
 function start () {
-  const app = new Vue({
+  window.app = new Vue({
+    el: '#app',
     render: h => h(App),
     router,
     store
   })
-
-  window.app = app.$mount('#app')
-  window.game = new Phaser.Game()
 }
 
 if (isCordova()) {

src/pages/Dashboard.vue

@@ -13,7 +13,7 @@
     h1 Vuedoo Documentation
     h3 Version {{ config.applicationVersion }}
     p Vue with a bit of dark magic.
-    img.logo(src="../assets/logo.png", alt="")
+    img.logo(src="images/logo.png", alt="")
 </template>
 
 <script>

vuedoo.config.js

@@ -4,13 +4,9 @@ module.exports = {
   alias: {
     '~/data': 'res/data'
   },
-  define: {
-    CANVAS_RENDERER: true,
-    WEBGL_RENDERER: true
-  },
   html: [
-    {filename: 'index.html', template: 'src/assets/index.pug'},
-    {filename: 'cordova.html', template: 'src/assets/cordova.pug'}
+    {filename: 'index.html', template: 'res/index.pug'},
+    {filename: 'cordova.html', template: 'res/cordova.pug'}
   ],
   plugins: ['pug', 'stylus'],
   replace: [
@@ -19,6 +15,6 @@ module.exports = {
   ],
   port: 1987,
   static: [
-    {from: 'res/static', to: 'static'}
+    {from: 'res/images', to: 'images'}
   ]
 }

webpack.config-dev.js

@@ -9,6 +9,10 @@ Object.keys(webpackConfig.entry).forEach(name => {
 
 module.exports = webpackMerge(webpackConfig, {
   devtool: '#cheap-module-eval-source-map',
+  mode: 'development',
+  optimization: {
+    minimize: false
+  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {

webpack.config-prod.js

@@ -5,6 +5,10 @@ const config = require('./lib/config')
 
 module.exports = webpackMerge(webpackConfig, {
   devtool: config.sourcemap ? '#source-map' : false,
+  mode: 'production',
+  optimization: {
+    minimize: true
+  },
   output: {
     filename: '[name].[chunkhash].js'
   },
@@ -16,10 +20,6 @@ module.exports = webpackMerge(webpackConfig, {
     }),
     new webpack.LoaderOptionsPlugin({
       minimize: true
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      parallel: true,
-      sourceMap: config.sourcemap
     })
   ]
 })

webpack.config.js

@@ -5,6 +5,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ProgressBarWebpackPlugin = require('progress-bar-webpack-plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 const config = require('./lib/config.js')
 const helpers = require('./lib/helpers.js')
 
@@ -23,7 +24,7 @@ let webpackConfig = {
     rules: [
       {
         test: /\.css$/,
-        loaders: ['style-loader', 'css-loader']
+        loaders: ['vue-style-loader', 'css-loader']
       },
       {
         test: /\.js$/,
@@ -84,35 +85,26 @@ let webpackConfig = {
   },
 
   plugins: [
-    new webpack.NamedModulesPlugin(),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: helpers.optimizeCommonChunks
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      chunks: ['vendor']
-    }),
+    new VueLoaderPlugin(),
     new CopyWebpackPlugin(lodash.map(config.static, entry => {
       if (entry.from) entry.from = helpers.resolveProjectPath(entry.from)
 
       return entry
     })),
-    new ProgressBarWebpackPlugin({
-      format: chalk.blue('Building') + ' [:percent :bar]',
-      summary: false
-    }),
     new FriendlyErrorsWebpackPlugin({
       compilationSuccessInfo: {
         messages: ['URL: http://localhost:' + config.port]
       }
+    }),
+    new ProgressBarWebpackPlugin({
+      format: chalk.blue('Building') + ' [:percent :bar]',
+      summary: false
     })
   ],
 
   resolve: {
     alias: helpers.mergeAlias({
       '~': helpers.resolveProjectPath(),
-      'vuedoo/utils': helpers.resolveLibraryPath('lib/utils'),
       'vue$': 'vue/dist/vue.esm.js'
     }, config.alias),
     extensions: ['.css', '.js', '.json', '.vue'],