upgraded all npm packages (webpack 5, eslint 7, etc) and activated eslint

.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:vue-a11y/base',
+    'standard',
+    // 'plugin:prettier/recommended'
+  ],
+  plugins: [
+    'vue',
+    'vue-a11y'
+  ],
+  rules: {
+    'no-unused-vars': ["warn"],
+  },
+  ignorePatterns: [
+    "vendor/**",
+    "web/core/**"
+  ],
+  globals: {
+    "Drupal": true,
+    "drupalSettings": true,
+    "drupalTranslations": true,
+    "domready": true,
+    "jQuery": true,
+    "_": true,
+    "matchMedia": true,
+    "Cookies": true,
+    "Backbone": true,
+    "Modernizr": true,
+    "Popper": true,
+    "Sortable": true,
+    "CKEDITOR": true
+  }
+}

build/webpack.config.base.js

@@ -78,10 +78,14 @@ module.exports = {
 
   plugins: [
     new MiniCssExtractPlugin({
-      path: utils.resolve(themePath + '/assets/dist/'),
       filename: '[name].css'
     }),
-    new VueLoaderPlugin()
+    new VueLoaderPlugin(),
-    // new ESLintPlugin()
+    new ESLintPlugin({
+      // exclude: ['node_modules', 'vendor', 'web/core']
+      // cache: false,
+      // ignore: true,
+      // useEslintrc: false,
+    })
   ]
 }

build/webpack.config.dev.js

@@ -1,7 +1,7 @@
 'use strict'
 
 const webpack = require('webpack')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const baseConfig = require('./webpack.config.base')
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 

build/webpack.config.prod.js

@@ -1,7 +1,7 @@
 'use strict'
 
 const webpack = require('webpack')
-const merge = require('webpack-merge')
+const { merge } = require('webpack-merge')
 const baseConfig = require('./webpack.config.base')
 const MiniCssExtractPlugin  = require('mini-css-extract-plugin')
 const TerserPlugin = require("terser-webpack-plugin");
@@ -40,18 +40,26 @@ module.exports = merge(baseConfig, {
     minimize: true,
     minimizer: [
       new TerserPlugin({
-        sourceMap: true, // Must be set to true if using source-maps in production
         parallel: true,
         test: /\.(js|vue)$/,
         // extractComments: true
         terserOptions: {
           compress: {
-            drop_console: true,
+            // drop_console: true,
+            pure_funcs: [
+                'console.log',
+                'console.info',
+                'console.debug'
+                // 'console.warn'
+            ]
           },
         },
       })
     ],
   },
-  // ,
+  plugins: [
-  // plugins: []
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ]
 })

package.json

@@ -4,7 +4,7 @@
   "description": "A Drupal 8 Vuejs template using Webpack 4 for materio.com",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack --progress --watch --config build/webpack.config.dev.js",
+    "dev": "webpack --watch --config build/webpack.config.dev.js",
     "prod": "webpack --config build/webpack.config.prod.js",
     "lint": "eslint --ext .js,.vue src",
     "lint:fix": "eslint --ext .js,.vue src --fix",
@@ -18,16 +18,16 @@
   "author": "Bachir Soussi Chiadmi",
   "license": "MIT",
   "dependencies": {
-    "axios": "^0.18.1",
+    "axios": "^0.21.0",
     "vue": "^2.6.12",
     "vue-autofocus-directive": "^1.0.4",
-    "vue-cool-lightbox": "^1.1.0",
+    "vue-cool-lightbox": "^2.6.9",
     "vue-infinite-loading": "^2.4.5",
-    "vue-meta": "^1.6.0",
+    "vue-meta": "^2.4.0",
     "vue-router": "^3.4.9",
     "vue-vimeo-player": "^0.1.0",
     "vue-youtube-embed": "^2.2.2",
-    "vuex": "^3.5.1"
+    "vuex": "^3.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -35,35 +35,38 @@
     "@vue/test-utils": "^1.1.1",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^24.9.0",
+    "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.1",
-    "copy-webpack-plugin": "^5.1.2",
+    "copy-webpack-plugin": "^6.3.2",
-    "css-loader": "^2.1.1",
+    "css-loader": "^5.0.1",
-    "eslint": "^5.15.3",
+    "eslint": "^7.14.0",
     "eslint-config-prettier": "^6.15.0",
-    "eslint-config-standard": "^12.0.0",
+    "eslint-config-standard": "^16.0.2",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^8.0.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.1.0",
+    "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^5.2.3",
+    "eslint-plugin-vue": "^7.1.0",
-    "eslint-plugin-vue-a11y": "0.0.28",
+    "eslint-plugin-vue-a11y": "0.0.31",
     "eslint-webpack-plugin": "^2.4.0",
-    "mini-css-extract-plugin": "^0.5.0",
+    "mini-css-extract-plugin": "^1.3.1",
-    "node-sass": "^4.14.1",
+    "node-sass": "^5.0.0",
-    "sass-loader": "^7.3.1",
+    "querystring-es3": "^0.2.1",
-    "style-loader": "^0.23.1",
+    "sass-loader": "^10.1.0",
+    "style-loader": "^2.0.0",
     "uglify-es": "^3.3.9",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "url-loader": "^1.1.2",
+    "url-loader": "^4.1.1",
+    "vue-eslint-parser": "^7.1.1",
     "vue-jest": "^3.0.7",
     "vue-loader": "^15.9.5",
     "vue-server-renderer": "^2.6.12",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "^4.44.2",
+    "webpack": "^5.6.0",
-    "webpack-cli": "^3.3.12",
+    "webpack-cli": "^4.2.0",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^5.4.0"
   }
 }

web/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "./core/.eslintrc.json"
-}