feat: upgrade to webpack 4

client/app.js

@@ -57,6 +57,8 @@ window.graphQL = new ApolloClient({
 // Initialize Vue Modules
 // ====================================
 
+Vue.config.productionTip = false
+
 Vue.use(VueRouter)
 Vue.use(VueApollo)
 Vue.use(VueClipboards)

dev/webpack/webpack.common.js

@@ -3,8 +3,7 @@ const fs = require('fs-extra')
 const webpack = require('webpack')
 
 const CopyWebpackPlugin = require('copy-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const NameAllModulesPlugin = require('name-all-modules-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 const babelConfig = fs.readJsonSync(path.join(process.cwd(), '.babelrc'))
 const postCSSConfig = {
@@ -25,7 +24,8 @@ module.exports = {
     path: path.join(process.cwd(), 'assets'),
     publicPath: '/',
     filename: 'js/[name].js',
-    chunkFilename: 'js/[name].chunk.js'
+    chunkFilename: 'js/[name].chunk.js',
+    globalObject: 'this'
   },
   module: {
     rules: [
@@ -51,12 +51,8 @@ module.exports = {
       {
         test: /\.css$/,
         use: [
-          {
-            loader: 'style-loader'
-          },
-          {
-            loader: 'css-loader'
-          },
+          MiniCssExtractPlugin.loader,
+          'css-loader',
           {
             loader: 'postcss-loader',
             options: postCSSConfig
@@ -65,96 +61,70 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'cache-loader',
-              options: {
-                cacheDirectory: cacheDir
-              }
-            },
-            {
-              loader: 'css-loader'
-            },
-            {
-              loader: 'postcss-loader',
-              options: postCSSConfig
-            },
-            {
-              loader: 'sass-loader',
-              options: {
-                sourceMap: false
-              }
+        use: [
+          'style-loader',
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: postCSSConfig
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: false
             }
-          ]
-        })
+          }
+        ]
       },
       {
         test: /\.styl$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'cache-loader',
-              options: {
-                cacheDirectory: cacheDir
-              }
-            },
-            {
-              loader: 'css-loader'
-            },
-            {
-              loader: 'postcss-loader',
-              options: postCSSConfig
-            },
-            {
-              loader: 'stylus-loader'
-            }
-          ]
-        })
+        use: [
+          'style-loader',
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: postCSSConfig
+          },
+          'stylus-loader'
+        ]
       },
       {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
           loaders: {
-            css: ExtractTextPlugin.extract({
-              fallback: 'vue-style-loader',
-              use: [
-                {
-                  loader: 'css-loader'
-                },
-                {
-                  loader: 'postcss-loader',
-                  options: postCSSConfig
+            css: [
+              'vue-style-loader',
+              MiniCssExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: postCSSConfig
+              }
+            ],
+            scss: [
+              'vue-style-loader',
+              MiniCssExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: postCSSConfig
+              },
+              {
+                loader: 'sass-loader',
+                options: {
+                  sourceMap: false
                 }
-              ]
-            }),
-            scss: ExtractTextPlugin.extract({
-              fallback: 'vue-style-loader',
-              use: [
-                {
-                  loader: 'css-loader'
-                },
-                {
-                  loader: 'postcss-loader',
-                  options: postCSSConfig
-                },
-                {
-                  loader: 'sass-loader',
-                  options: {
-                    sourceMap: false
-                  }
-                },
-                {
-                  loader: 'sass-resources-loader',
-                  options: {
-                    resources: path.join(process.cwd(), '/client/scss/global.scss')
-                  }
+              },
+              {
+                loader: 'sass-resources-loader',
+                options: {
+                  resources: path.join(process.cwd(), '/client/scss/global.scss')
                 }
-              ]
-            }),
+              }
+            ],
             js: [
               {
                 loader: 'cache-loader',
@@ -223,26 +193,22 @@ module.exports = {
     ], {
 
     }),
-    new webpack.NamedModulesPlugin(),
-    new webpack.NamedChunksPlugin((chunk) => {
-      if (chunk.name) {
-        return chunk.name
-      }
-      return chunk.modules.map(m => path.relative(m.context, m.request)).join('_')
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks(module) {
-        return module.context && module.context.includes('node_modules')
-      }
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'runtime',
-      minChunks: Infinity
-    }),
-    new NameAllModulesPlugin()
+    new MiniCssExtractPlugin({
+      filename: 'css/bundle.css',
+      chunkFilename: 'css/[name].chunk.css'
+    })
   ],
+  optimization: {
+    namedModules: true,
+    splitChunks: {
+      name: 'vendor',
+      minChunks: 2
+    },
+    noEmitOnErrors: true,
+    concatenateModules: true
+  },
   resolve: {
+    mainFields: ['browser', 'main', 'module'],
     symlinks: true,
     alias: {
       '@': path.join(process.cwd(), 'client'),
@@ -265,5 +231,9 @@ module.exports = {
   node: {
     fs: 'empty'
   },
+  stats: {
+    children: false,
+    entrypoints: false
+  },
   target: 'web'
 }

dev/webpack/webpack.dev.js

@@ -1,13 +1,13 @@
 const webpack = require('webpack')
 const merge = require('webpack-merge')
 
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const WriteFilePlugin = require('write-file-webpack-plugin')
 const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
 
 const common = require('./webpack.common.js')
 
 module.exports = merge(common, {
+  mode: 'development',
   entry: {
     client: ['./client/index.js', 'webpack-hot-middleware/client']
   },
@@ -19,9 +19,9 @@ module.exports = merge(common, {
       format: 'compact'
     }),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('development')
+      'process.env.NODE_ENV': JSON.stringify('development'),
+      '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
     }),
-    new ExtractTextPlugin({ disable: true }),
     new WriteFilePlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.WatchIgnorePlugin([

dev/webpack/webpack.prod.js

@@ -1,18 +1,15 @@
 const webpack = require('webpack')
 const merge = require('webpack-merge')
-const path = require('path')
 
 const CleanWebpackPlugin = require('clean-webpack-plugin')
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OfflinePlugin = require('offline-plugin')
-const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin')
 const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 
 const common = require('./webpack.common.js')
 
 module.exports = merge(common, {
+  mode: 'production',
   module: {
     rules: []
   },
@@ -29,28 +26,21 @@ module.exports = merge(common, {
       root: process.cwd(),
       verbose: false
     }),
-    new UglifyJSPlugin({
-      cache: path.join(process.cwd(), '.webpack-cache/uglify'),
-      parallel: true
-    }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
     }),
-    new ExtractTextPlugin({
-      filename: 'css/bundle.css',
-      allChunks: true
-    }),
     new OptimizeCssAssetsPlugin({
       cssProcessorOptions: { discardComments: { removeAll: true } },
       canPrint: true
     }),
     new OfflinePlugin({
+      ServiceWorker: {
+        minify: false
+      },
       publicPath: '/',
       externals: ['/'],
       caches: {
         main: [
-          'js/runtime.js',
-          'js/vendor.js',
           'js/client.js'
         ],
         additional: [
@@ -61,19 +51,6 @@ module.exports = merge(common, {
         ]
       },
       safeToUseOptionalCaches: true
-    }),
-    new DuplicatePackageCheckerPlugin(),
-    // Disable Extract Text Plugin stats:
-    {
-      apply(compiler) {
-        compiler.plugin('done', stats => {
-          if (Array.isArray(stats.compilation.children)) {
-            stats.compilation.children = stats.compilation.children.filter(child => {
-              return child.name.indexOf('extract-text-webpack-plugin') !== 0
-            })
-          }
-        })
-      }
-    }
+    })
   ]
 })

package.json

@@ -44,7 +44,7 @@
     "bcryptjs-then": "1.0.1",
     "bluebird": "3.5.1",
     "body-parser": "1.18.2",
-    "bugsnag": "2.3.0",
+    "bugsnag": "2.3.1",
     "bull": "3.3.10",
     "cheerio": "1.0.0-rc.2",
     "child-process-promise": "2.2.1",
@@ -56,8 +56,8 @@
     "dependency-graph": "0.7.0",
     "diff2html": "2.3.3",
     "dotize": "^0.2.0",
-    "execa": "0.9.0",
-    "express": "4.16.2",
+    "execa": "0.10.0",
+    "express": "4.16.3",
     "express-brute": "1.0.1",
     "express-brute-redis": "0.0.1",
     "express-session": "1.15.6",
@@ -65,10 +65,10 @@
     "filesize.js": "1.0.2",
     "follow-redirects": "1.4.1",
     "fs-extra": "5.0.0",
-    "graphql": "0.13.1",
+    "graphql": "0.13.2",
     "graphql-list-fields": "2.0.1",
-    "graphql-tools": "2.21.0",
-    "i18next": "10.5.0",
+    "graphql-tools": "2.23.1",
+    "i18next": "10.5.1",
     "i18next-express-middleware": "1.1.1",
     "i18next-localstorage-cache": "1.1.1",
     "i18next-node-fs-backend": "1.0.0",
@@ -124,11 +124,11 @@
     "raven": "2.4.2",
     "read-chunk": "2.1.0",
     "remove-markdown": "0.2.2",
-    "request": "2.83.0",
+    "request": "2.85.0",
     "request-promise": "4.2.2",
     "scim-query-filter-parser": "1.1.0",
     "semver": "5.5.0",
-    "sequelize": "4.36.0",
+    "sequelize": "4.37.1",
     "serve-favicon": "2.4.5",
     "uuid": "3.2.1",
     "validator": "9.4.1",
@@ -138,6 +138,7 @@
   },
   "devDependencies": {
     "@panter/vue-i18next": "0.9.1",
+    "@vue/cli": "3.0.0-beta.6",
     "apollo-client-preset": "1.0.8",
     "apollo-fetch": "0.7.0",
     "apollo-link-batch-http": "1.2.1",
@@ -145,7 +146,7 @@
     "babel-cli": "6.26.0",
     "babel-core": "6.26.0",
     "babel-eslint": "8.2.2",
-    "babel-jest": "22.4.1",
+    "babel-jest": "23.0.0-alpha.0",
     "babel-loader": "7.1.4",
     "babel-plugin-graphql-tag": "1.5.0",
     "babel-plugin-lodash": "3.3.2",
@@ -157,12 +158,12 @@
     "brace": "0.11.1",
     "cache-loader": "1.2.2",
     "clean-webpack-plugin": "0.1.19",
-    "colors": "1.2.0",
+    "colors": "1.2.1",
     "copy-webpack-plugin": "4.5.1",
-    "css-loader": "0.28.10",
+    "css-loader": "0.28.11",
     "cssnano": "4.0.0-rc.2",
     "duplicate-package-checker-webpack-plugin": "2.1.0",
-    "eslint": "4.18.2",
+    "eslint": "4.19.0",
     "eslint-config-requarks": "1.0.7",
     "eslint-config-standard": "11.0.0",
     "eslint-plugin-import": "2.9.0",
@@ -181,10 +182,11 @@
     "jest-junit": "3.6.0",
     "js-cookie": "2.2.0",
     "lodash-webpack-plugin": "0.11.4",
+    "mini-css-extract-plugin": "0.2.0",
     "name-all-modules-plugin": "1.0.1",
     "node-sass": "4.7.2",
     "offline-plugin": "4.9.0",
-    "optimize-css-assets-webpack-plugin": "3.2.0",
+    "optimize-css-assets-webpack-plugin": "4.0.0",
     "postcss-flexbugs-fixes": "3.3.0",
     "postcss-flexibility": "2.0.0",
     "postcss-loader": "2.1.1",
@@ -200,10 +202,10 @@
     "stylus": "0.54.5",
     "stylus-loader": "3.0.2",
     "twemoji-awesome": "1.0.6",
-    "uglifyjs-webpack-plugin": "1.2.3",
+    "uglifyjs-webpack-plugin": "1.2.4",
     "vee-validate": "2.0.5",
     "velocity-animate": "1.5.1",
-    "vue": "2.5.15",
+    "vue": "2.5.16",
     "vue-apollo": "3.0.0-beta.5",
     "vue-clipboards": "1.2.2",
     "vue-codemirror": "4.0.3",
@@ -212,13 +214,14 @@
     "vue-material-design-icons": "1.2.1",
     "vue-router": "3.0.1",
     "vue-simple-breakpoints": "1.0.3",
-    "vue-template-compiler": "2.5.15",
-    "vuetify": "1.0.6",
+    "vue-template-compiler": "2.5.16",
+    "vuetify": "1.0.8",
     "vuex": "3.0.1",
-    "vuex-persistedstate": "2.4.2",
-    "webpack": "3.11.0",
+    "vuex-persistedstate": "2.5.1",
+    "webpack": "4.1.1",
     "webpack-bundle-analyzer": "2.11.1",
-    "webpack-dev-middleware": "2.0.3",
+    "webpack-cli": "2.0.12",
+    "webpack-dev-middleware": "3.0.1",
     "webpack-hot-middleware": "2.21.2",
     "webpack-merge": "4.1.2",
     "whatwg-fetch": "2.0.3",

server/views/master.pug

@@ -25,11 +25,8 @@ html
     link(type='text/css', rel='stylesheet', href='/css/bundle.css')
     link(type='text/css', rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Roboto:400,500,700|Source+Code+Pro:400,700|Material+Icons')
     link(type='text/css', rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css')
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" />
 
     //- JS
-    script(type='text/javascript', src='/js/runtime.js')
-    script(type='text/javascript', src='/js/vendor.js')
     script(type='text/javascript', src='/js/client.js')
 
     block head