upgrade to webpack 4 (latest)

.babelrc

@@ -1,8 +1,3 @@
 {
-  "presets": [
-    ["env", { "modules": false }]
-  ],
-  "plugins": [
-    "syntax-dynamic-import"
-  ]
-}
+  "presets": ["@babel/env"]
+}

build/setup-dev-server.js

@@ -41,18 +41,20 @@ module.exports = function setupDevServer (app, templatePath, cb) {
   clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
   clientConfig.output.filename = '[name].js'
   clientConfig.plugins.push(
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
+    new webpack.HotModuleReplacementPlugin()
   )
 
   // dev middleware
   const clientCompiler = webpack(clientConfig)
   const devMiddleware = require('webpack-dev-middleware')(clientCompiler, {
     publicPath: clientConfig.output.publicPath,
+    serverSideRender: true,
     noInfo: true
   })
   app.use(devMiddleware)
-  clientCompiler.plugin('done', stats => {
+
+
+  clientCompiler.hooks.done.tap('vue-hmr', stats => {
     stats = stats.toJson()
     stats.errors.forEach(err => console.error(err))
     stats.warnings.forEach(err => console.warn(err))
@@ -63,6 +65,7 @@ module.exports = function setupDevServer (app, templatePath, cb) {
     ))
     update()
   })
+
 
   // hot middleware
   app.use(require('webpack-hot-middleware')(clientCompiler, { heartbeat: 5000 }))
@@ -79,7 +82,7 @@ module.exports = function setupDevServer (app, templatePath, cb) {
     // read bundle generated by vue-ssr-webpack-plugin
     bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))
     update()
-  })
+  });
 
   return readyPromise
 }

build/webpack.base.config.js

@@ -1,11 +1,12 @@
 const path = require('path')
 const webpack = require('webpack')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const { VueLoaderPlugin } = require('vue-loader')
 
 const isProd = process.env.NODE_ENV === 'production'
-
+const mode = process.env.NODE_ENV || 'development';
+// https://www.namecheap.com/blog/production-ready-vue-ssr-in-5-simple-steps/
 module.exports = {
   devtool: isProd
     ? false
@@ -15,11 +16,23 @@ module.exports = {
     publicPath: '/dist/',
     filename: '[name].[chunkhash].js'
   },
+  mode,
   resolve: {
     alias: {
       'public': path.resolve(__dirname, '../public')
     }
   },
+  //https://stackoverflow.com/questions/49017682/webpack-4-migration-commonschunkplugin
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          name: "vendors"
+        }
+      }
+    },
+    // mimimize default in production
+  },
   module: {
     noParse: /es6-promise\.js$/, // avoid webpack shimming process
     rules: [
@@ -42,24 +55,32 @@ module.exports = {
         loader: 'url-loader',
         options: {
           limit: 10000,
+          esModule: false,
           name: '[name].[ext]?[hash]'
         }
       },
       {
-        test: /\.styl(us)?$/,
-        use: isProd
-          ? ExtractTextPlugin.extract({
-              use: [
-                {
-                  loader: 'css-loader',
-                  options: { minimize: true }
-                },
-                'stylus-loader'
-              ],
-              fallback: 'vue-style-loader'
-            })
-          : ['vue-style-loader', 'css-loader', 'stylus-loader']
+        test: /\.(styl(us))?$/,
+        use: ['vue-style-loader', 'css-loader', 'stylus-loader']
       },
+      {
+        test: /\.css$/,
+        //exclude: /node_modules/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader',
+          {
+            loader: "postcss-loader",
+            options: {
+              ident: "postcss",
+              plugins: [
+                require("postcss-import"),
+                //require("tailwindcss"),
+                require("autoprefixer")
+              ]
+            }
+          } 
+        ],
+      }
+
     ]
   },
   performance: {
@@ -68,16 +89,13 @@ module.exports = {
   plugins: isProd
     ? [
         new VueLoaderPlugin(),
-        new webpack.optimize.UglifyJsPlugin({
-          compress: { warnings: false }
-        }),
-        new webpack.optimize.ModuleConcatenationPlugin(),
-        new ExtractTextPlugin({
+        new MiniCssExtractPlugin({
           filename: 'common.[chunkhash].css'
         })
       ]
     : [
         new VueLoaderPlugin(),
+        new MiniCssExtractPlugin({}),
         new FriendlyErrorsPlugin()
       ]
 }

build/webpack.client.config.js

@@ -4,6 +4,8 @@ const base = require('./webpack.base.config')
 const SWPrecachePlugin = require('sw-precache-webpack-plugin')
 const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
 
+const mode = process.env.NODE_ENV || 'development';
+
 const config = merge(base, {
   entry: {
     app: './src/entry-client.js'
@@ -13,30 +15,13 @@ const config = merge(base, {
       'create-api': './create-api-client.js'
     }
   },
+
   plugins: [
     // strip dev-only code in Vue source
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+      'process.env.NODE_ENV': JSON.stringify(mode),
       'process.env.VUE_ENV': '"client"'
     }),
-    // extract vendor chunks for better caching
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function (module) {
-        // a module is extracted into the vendor chunk if...
-        return (
-          // it's inside node_modules
-          /node_modules/.test(module.context) &&
-          // and not a CSS file (due to extract-text-webpack-plugin limitation)
-          !/\.css$/.test(module.request)
-        )
-      }
-    }),
-    // extract webpack runtime & manifest to avoid vendor chunk hash changing
-    // on every build.
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest'
-    }),
     new VueSSRClientPlugin()
   ]
 })