chore: bump deps and move to webpack 5 (#155)

.eslintrc.js

@@ -21,6 +21,8 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 'off',
     'vue/no-deprecated-v-bind-sync': 'off',
+    'vue/no-mutating-props': 'off',
+    'vue/experimental-script-setup-vars': 'off',
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-unused-vars': ['error', { vars: 'local' }]

build/webpack.base.conf.js

@@ -39,6 +39,16 @@ module.exports = {
     alias: {
       vue$: 'vue/dist/vue.esm.js',
       '@': resolve('src')
+    },
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    fallback: {
+      dgram: false,
+      fs: false,
+      net: false,
+      tls: false,
+      child_process: false,
+      setImmediate: false
     }
   },
   module: {
@@ -102,17 +112,5 @@ module.exports = {
         ]
       }
     ]
-  },
-  node: {
-    // prevent webpack from injecting useless setImmediate polyfill because Vue
-    // source contains it (although only uses it if it's native).
-    setImmediate: false,
-    // prevent webpack from injecting mocks to Node native modules
-    // that does not make sense for the client
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
   }
 }

build/webpack.dev.conf.js

@@ -23,7 +23,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     })
   },
   // cheap-module-eval-source-map is faster for development
-  devtool: config.dev.devtool,
+  devtool: config.dev.devtool ? 'eval-cheap-module-source-map' : false,
 
   // these devServer options should be customized in /config/index.js
   devServer: {
@@ -46,13 +46,14 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       poll: config.dev.poll
     }
   },
+  optimization: {
+    emitOnErrors: true
+  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': require('../config/dev.env')
     }),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       title: 'ZWave To MQTT',

build/webpack.prod.conf.js

@@ -7,7 +7,6 @@ const { merge } = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 
 const env = require('../config/prod.env')
@@ -29,7 +28,10 @@ const webpackConfig = merge(baseWebpackConfig, {
       })
     ]
   },
-  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  devtool:
+    config.build.productionSourceMap && config.build.devtool
+      ? 'cheap-module-source-map'
+      : false,
   output: {
     path: config.build.assetsRoot,
     filename: utils.assetsPath('js/[name].[chunkhash].js'),
@@ -44,15 +46,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     new MiniCssExtractPlugin({
       filename: utils.assetsPath('css/[name].[contenthash].css')
     }),
-    // Compress extracted CSS. We are using this plugin so that possible
-    // duplicated CSS from different components can be deduped.
-    new OptimizeCSSPlugin({
-      cssProcessorOptions: config.build.productionSourceMap
-        ? { safe: true, map: { inline: false } }
-        : { safe: true }
-    }),
     // keep module.id stable when vendor modules does not change
-    new webpack.HashedModuleIdsPlugin(),
     // enable scope hoisting
     new webpack.optimize.ModuleConcatenationPlugin(),
 

config/index.js

@@ -54,7 +54,7 @@ module.exports = {
      */
 
     // https://webpack.js.org/configuration/devtool/#development
-    devtool: 'cheap-module-eval-source-map',
+    devtool: 'eval-cheap-module-source-map',
 
     // If you have problems debugging vue-files in devtools,
     // set this to false - it *may* help
@@ -79,7 +79,7 @@ module.exports = {
 
     productionSourceMap: true,
     // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#source-map',
+    devtool: 'cheap-module-source-map',
 
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.