Upgrade to Webpack 4

[heathharrelson]

Webpack 4 was released in February, and Vizr is still using 3.8.x.

[heathharrelson]

Unfortunately, it looks like this won't be 100% straightforward.

Vizr uses extract-text-webpack-plugin to bundle the CSS file, which seems to have issues (webpack-contrib/extract-text-webpack-plugin#701). Either use extract-text-webpack-plugin@next or switch to mini-css-extract-plugin.

After working around extract-text-webpack-plugin, the build throws an error trying to import the PNG image for the example chart. Possibly an issue with configuration for file-loader or vue-loader. The error reported is:

ERROR in ./lib/vizr_example.png
Module build failed (from ./node_modules/file-loader/dist/cjs.js):
TypeError: Cannot read property 'context' of undefined
    at Object.loader (/Users/harrelst/Development/vizr/REDCap-Vizr/node_modules/file-loader/dist/index.js:34:49)
 @ ./js/components/ExampleChart.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./js/components/ExampleChart.vue?vue&type=script&lang=js) 7:20-57
 @ ./js/components/ExampleChart.vue?vue&type=script&lang=js
 @ ./js/components/ExampleChart.vue
 @ ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./js/components/Vizr.vue?vue&type=script&lang=js
 @ ./js/components/Vizr.vue?vue&type=script&lang=js
 @ ./js/components/Vizr.vue
 @ ./js/main.js
 @ multi ./js/main.js