Webpack update to version 4 (#265)

Updating to webpackv4. Fix autoprefixer warnings. Fix prettier  plugin. Fix postcss format.

package.json

@@ -31,31 +31,34 @@
     "vuex": "^2.4.0"
   },
   "devDependencies": {
+    "@vue/test-utils": "^1.3.0",
+    "autoprefixer": "^9.8.8",
     "babel-core": "^6.0.0",
     "babel-jest": "^21.2.0",
-    "babel-loader": "^6.0.0",
-    "babel-minify-webpack-plugin": "^0.2.0",
+    "babel-loader": "^7.1.5",
+    "babel-minify-webpack-plugin": "^0.3.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.5.1",
     "cross-env": "^3.0.0",
-    "css-loader": "^0.25.0",
+    "css-loader": "^1.0.1",
     "eslint-plugin-html": "^3.2.2",
-    "file-loader": "^0.9.0",
+    "file-loader": "^1.1.11",
     "imports-loader": "^0.7.1",
     "jest": "^21.2.1",
     "jest-serializer-vue": "^0.2.0",
     "jest-vue": "^0.7.0",
     "node-sass": "^4.14.1",
-    "postcss-loader": "^2.0.6",
+    "postcss-loader": "^4.3.0",
+    "prettier": "1.12.1",
     "sass-loader": "^7.3.1",
     "standard": "^10.0.3",
-    "vue-loader": "^12.1.0",
+    "vue-loader": "^14.2.2",
     "vue-server-renderer": "^2.4.2",
     "vue-template-compiler": "^2.3.3",
-    "vue-test-utils": "^1.0.0-beta.1",
-    "webpack": "^3.12.0",
-    "webpack-dev-server": "^2.11.5"
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.3"
   },
   "jest": {
     "testPathIgnorePatterns": [
@@ -90,4 +93,3 @@
     ]
   }
 }
-

postcss.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: {
-    'autoprefixer': {}
-  }
+  plugins: [
+    require('autoprefixer')
+  ]
 }

tests/app.spec.js

@@ -1,4 +1,4 @@
-import { shallow } from 'vue-test-utils'
+import { shallow } from '@vue/test-utils'
 import Vue from 'vue'
 import Vuex from 'vuex'
 import Buefy from 'buefy'

tests/components/__snapshots__/baseball-card.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Baseball card Matches snapshot 1`] = `
-<div class="column is-one-third flip-container">
+<div photoUrl="https://example.com/image.png" class="column is-one-third flip-container">
     <div class="flipper">
         <div class="front"><svg></svg></div>
         <div class="back"><svg></svg></div> <svg class="contents">
@@ -14,13 +14,16 @@ exports[`Baseball card Matches snapshot 1`] = `
                             <span class="ward-ordinal">
                                 1st Ward
 
-                            </span></h3>
-                        <dl><dt>Voters (D)</dt>
-                            <dd>1,000</dd> <dt>Turnout (D)</dt>
-                            <dd>40%</dd> <dt>Vacancies</dt>
+                            </span>
+                        </h3>
+                        <dl>
+                            <dt>Voters (D)</dt>
+                            <dd>1,000</dd>
+                            <dt>Turnout (D)</dt>
+                            <dd>40%</dd>
+                            <dt>Vacancies</dt>
                             <dd>35</dd>
-                        </dl>
-                        <!---->
+                        </dl> <router-link-stub to="/leaders/democratic/1/john-doe" class="button is-info details">Details</router-link-stub>
                     </div>
                 </body>
             </foreignObject>

tests/components/baseball-card.spec.js

@@ -1,4 +1,4 @@
-import { mount } from 'vue-test-utils'
+import { mount } from '@vue/test-utils'
 import { createRenderer } from 'vue-server-renderer'
 
 import BaseballCard from '../../src/components/baseball-card/index.vue'

tests/components/committee-person.spec.js

@@ -1,4 +1,4 @@
-import { mount } from 'vue-test-utils'
+import { mount } from '@vue/test-utils'
 
 import CommitteePerson from '../../src/components/committee-person.vue'
 

tests/components/notification.spec.js

@@ -1,4 +1,4 @@
-import { mount } from 'vue-test-utils'
+import { mount } from '@vue/test-utils'
 
 import Notification from '../../src/components/notification.vue'
 

tests/views/content-page.spec.js

@@ -1,4 +1,4 @@
-import { mount } from 'vue-test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import Vue from 'vue'
 
@@ -40,7 +40,7 @@ describe('Content page', () => {
       mocks: { $store }
     })
     const contentEl = wrapper.find('#content')
-    const html = '<div id="content"><p><em>Italic text</em></p>\n</div>'
+    const html = '<div id="content">\n  <p><em>Italic text</em></p>\n</div>'
     expect(contentEl.html().trim()).toBe(html)
   })
 })

tests/views/ward-leader.spec.js

@@ -1,4 +1,4 @@
-import { mount } from 'vue-test-utils'
+import { mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import Vue from 'vue'
 

webpack.config.js

@@ -64,6 +64,7 @@ module.exports = {
 }
 
 if (process.env.NODE_ENV === 'production') {
+  module.exports.mode = 'production'
   module.exports.devtool = '#cheap-source-map' // See https://github.com/webpack-contrib/babel-minify-webpack-plugin/issues/68
   module.exports.plugins = module.exports.plugins.concat([
     new MinifyPlugin({}, { sourceMap: true }),