Initial updates for webpack 5 support (#101)

* Remove tar dependency

* Add some missing deps (vuex,vue-router,memory-fs)

* Update webpack to v5 and update webpack deps to latest

* Add patch-package and vue-server-renderer patch

* Remove resolve, initialStateMetaTag, and some logging

* Remove patches directory, must be handled from parent repo

* Update output.libraryTarget -> output.library.type

* Move base devtool config to client build

* Update webpack-dev-middleware to latest

* Update HMR for webpack 5

* Remove patch-package

* Update vue/vue-server-renderer/vue-template-compiler to 2.6.14

build/webpack.base.config.js

@@ -1,7 +1,5 @@
 /* eslint-disable no-console */
 
-const path = require('path');
-
 const webpack = require('webpack');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -10,14 +8,11 @@ const isLocal = process.env.NODE_ENV === 'local';
 const isProd = process.env.NODE_ENV === 'production';
 const isDev = !isLocal && !isProd;
 const logLevel = process.env.LOG_LEVEL || 'debug';
-const environment = isProd ? 'production' : 'development';
+const nodeEnv = isProd ? 'production' : 'development';
 
-console.log(`process.env.NODE_ENV: ${process.env.NODE_ENV}`);
-console.log(`Webpack building for environment: ${environment}`);
+console.log(`Webpack building for NODE_ENV: ${nodeEnv}`);
 
 function getCssLoaders(config) {
-    console.log(`Enable PostCSS: ${config.enablePostCss}`);
-
     const addlLoaders = [
         ...(config.enablePostCss ? [{
             loader: 'postcss-loader',
@@ -71,26 +66,12 @@ module.exports = {
     logLevel,
     getBaseConfig(config) {
         return {
-            mode: environment,
-            devtool: isProd ? 'source-map' : 'eval-source-map',
+            mode: nodeEnv,
             output: {
                 publicPath: '/dist/',
                 filename: isProd ? '[name].[chunkhash].js' : '[name].js',
                 chunkFilename: isProd ? '_[name].[chunkhash].js' : '_[name].js',
             },
-            resolve: {
-                alias: {
-                    '@components': path.resolve(config.rootDir, 'src/components'),
-                    '@dist': path.resolve(config.rootDir, 'dist'),
-                    '@js': path.resolve(config.rootDir, 'src/js'),
-                    '@scss': path.resolve(config.rootDir, 'src/scss'),
-                    '@server': path.resolve(config.rootDir, 'src/server'),
-                    '@src': path.resolve(config.rootDir, 'src'),
-                    '@static': path.resolve(config.rootDir, 'static'),
-                    '@store': path.resolve(config.rootDir, 'src/store'),
-                },
-                extensions: ['*', '.js', '.vue', '.json'],
-            },
             module: {
                 rules: [
                     {
@@ -160,7 +141,7 @@ module.exports = {
                             resourceQuery: /inline/,
                             use: {
                                 loader: 'svg-inline-loader',
-                                options: config.svgInlineLoaderOptions,
+                                options: config.svgInlineLoaderOptions || {},
                             },
                         }, {
                             resourceQuery: /http/,
@@ -186,7 +167,7 @@ module.exports = {
             },
             plugins: [
                 new webpack.DefinePlugin({
-                    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+                    'process.env.NODE_ENV': JSON.stringify(nodeEnv),
                 }),
                 new VueLoaderPlugin(),
                 ...(config.extractCss ? [

build/webpack.client.config.js

@@ -27,6 +27,7 @@ module.exports = function getClientConfig(configOpts) {
 
     const clientConfig = merge(getBaseConfig(config), {
         name: 'client',
+        devtool: isProd ? 'source-map' : 'eval-source-map',
         entry: {
             app: './src/js/entry-client.js',
         },

build/webpack.server.config.js

@@ -5,7 +5,7 @@ const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
 
 const { getBaseConfig } = require('./webpack.base.config');
 
-function serverExternals(context, request, callback) {
+function serverExternals({ request }, callback) {
     // Tell webpack to ignore all node_modules dependencies except
     // lodash-es so we get proper tree shaking
     const nonRelativeExp = /^\w.*$/i;
@@ -43,7 +43,9 @@ module.exports = function getServerConfig(configOpts) {
         entry: './src/server/entry-server.js',
         output: {
             filename: 'server-bundle.js',
-            libraryTarget: 'commonjs2',
+            library: {
+                type: 'commonjs2',
+            },
         },
         target: 'node',
         externals: serverExternals,