Updates several development packages including Webpack. #696.

package.json

@@ -4,8 +4,8 @@
   "author": "Eduardo <eduardo.humberto1992@gmail.com>",
   "private": true,
   "scripts": {
-    "build": "cross-env NODE_ENV=development webpack --config webpack.dev.js --display-error-details --progress --hide-modules",
+    "build": "cross-env NODE_ENV=development webpack --config webpack.dev.js --progress --mode development",
-    "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
+    "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --progress --mode production"
   },
   "dependencies": {
     "apexcharts": "^3.34.0",
@@ -18,7 +18,7 @@
     "css-vars-ponyfill": "^2.4.7",
     "floating-vue": "^1.0.0-beta.15",
     "moment": "^2.29.1",
-    "node-sass": "^4.14.1",
+    "node-sass": "^7.0.1",
     "photoswipe": "^5.2.2",
     "qs": "^6.10.3",
     "react": "^17.0.2",
@@ -36,29 +36,29 @@
     "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
+    "@babel/core": "^7.17.8",
-    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-react": "^7.16.7",
-    "acorn": "^6.0.0",
+    "acorn": "^8.7.0",
-    "autoprefixer": "^9.7.6",
+    "autoprefixer": "^10.4.4",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.4",
-    "cross-env": "^5.2.1",
+    "cross-env": "^7.0.3",
-    "css-loader": "^1.0.1",
+    "css-loader": "^6.7.1",
-    "eslint": "^5.16.0",
+    "eslint": "^8.12.0",
-    "eslint-loader": "^2.2.1",
+    "eslint-plugin-vue": "^8.5.0",
-    "eslint-plugin-vue": "^5.2.3",
+    "eslint-webpack-plugin": "^3.1.1",
-    "file-loader": "^2.0.0",
+    "file-loader": "^6.2.0",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^6.2.1",
-    "sass-loader": "^7.3.1",
+    "sass-loader": "^12.6.0",
-    "style-loader": "^0.23.1",
+    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "3.0.0",
+    "terser-webpack-plugin": "5.3.1",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.14",
-    "webpack": "^4.45.0",
+    "webpack": "^5.70.0",
-    "webpack-bundle-analyzer": "^3.7.0",
+    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^3.3.12",
+    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.7.4",
-    "webpack-merge": "^5.4.0"
+    "webpack-merge": "^5.8.0"
   }
 }

src/views/admin/components/edition/item-edition-form.vue

@@ -947,9 +947,9 @@ import CustomDialog from '../other/custom-dialog.vue';
 import AttachmentsList from '../lists/attachments-list.vue';
 import { formHooks } from '../../js/mixins';
 import ItemMetadatumErrorsTooltip from '../other/item-metadatum-errors-tooltip.vue';
-import 'swiper/swiper.min.css';
+import 'swiper/css';
-import 'swiper/modules/mousewheel/mousewheel.min.css';
+import 'swiper/css/mousewheel';
-import 'swiper/modules/navigation/navigation.min.css';
+import 'swiper/css/navigation';
 import Swiper, { Mousewheel, Navigation } from 'swiper';
 import ItemDocumentTextModal from '../modals/item-document-text-modal.vue';
 import ItemDocumentURLModal from '../modals/item-document-url-modal.vue';

src/views/admin/components/search/filters-tags-list.vue

@@ -75,9 +75,9 @@
 
 <script>
     import { mapGetters } from 'vuex';
-    import 'swiper/swiper.min.css';
+    import 'swiper/css';
-    import 'swiper/modules/mousewheel/mousewheel.min.css';
+    import 'swiper/css/mousewheel';
-    import 'swiper/modules/navigation/navigation.min.css';
+    import 'swiper/css/navigation';
     import Swiper, { Mousewheel, Navigation } from 'swiper';
 
     export default {

src/views/gutenberg-blocks/blocks/carousel-collections-list/edit.js

@@ -10,10 +10,10 @@ import axios from 'axios';
 import qs from 'qs';
 import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
 import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
-import 'swiper/swiper.min.css';
+import 'swiper/css';
-import 'swiper/modules/a11y/a11y.min.css';
+import 'swiper/css/a11y';
-import 'swiper/modules/autoplay/autoplay.min.css';
+import 'swiper/css/autoplay';
-import 'swiper/modules/navigation/navigation.min.css';
+import 'swiper/css/navigation';
 
 export default function ({ attributes, setAttributes, className, isSelected, clientId }) {
     let {

src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue

@@ -150,10 +150,10 @@
 <script>
 import axios from 'axios';
 import qs from 'qs';
-import 'swiper/swiper.min.css';
+import 'swiper/css';
-import 'swiper/modules/a11y/a11y.min.css';
+import 'swiper/css/a11y';
-import 'swiper/modules/autoplay/autoplay.min.css';
+import 'swiper/css/autoplay';
-import 'swiper/modules/navigation/navigation.min.css';
+import 'swiper/css/navigation';
 import Swiper, { Autoplay, Navigation, A11y } from 'swiper';
 
 export default {

src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js

@@ -11,10 +11,10 @@ import qs from 'qs';
 import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
 import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
 import TainacanBlocksCompatColorPicker from '../../js/compatibility/tainacan-blocks-compat-colorpicker.js';
-import 'swiper/swiper.min.css';
+import 'swiper/css';
-import 'swiper/modules/a11y/a11y.min.css';
+import 'swiper/css/a11y';
-import 'swiper/modules/autoplay/autoplay.min.css';
+import 'swiper/css/autoplay';
-import 'swiper/modules/navigation/navigation.min.css';
+import 'swiper/css/navigation';
 
 export default function({ attributes, setAttributes, className, isSelected, clientId }){
     let {

src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue

@@ -153,10 +153,10 @@
 <script>
 import axios from 'axios';
 import qs from 'qs';
-import 'swiper/swiper.min.css';
+import 'swiper/css';
-import 'swiper/modules/a11y/a11y.min.css';
+import 'swiper/css/a11y';
-import 'swiper/modules/autoplay/autoplay.min.css';
+import 'swiper/css/autoplay';
-import 'swiper/modules/navigation/navigation.min.css';
+import 'swiper/css/navigation';
 import Swiper, { Autoplay, Navigation, A11y } from 'swiper';
 
 export default {

src/views/gutenberg-blocks/blocks/carousel-terms-list/edit.js

@@ -10,10 +10,10 @@ import axios from 'axios';
 import qs from 'qs';
 import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
 import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js';
-import 'swiper/swiper.min.css';
+import 'swiper/css';
-import 'swiper/modules/a11y/a11y.min.css';
+import 'swiper/css/a11y';
-import 'swiper/modules/autoplay/autoplay.min.css';
+import 'swiper/css/autoplay';
-import 'swiper/modules/navigation/navigation.min.css';
+import 'swiper/css/navigation';
 
 export default function({ attributes, setAttributes, className, isSelected, clientId }){
     let {

src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.vue

@@ -130,10 +130,10 @@
 <script>
 import axios from 'axios';
 import qs from 'qs';
-import 'swiper/swiper.min.css';
+import 'swiper/css';
-import 'swiper/modules/a11y/a11y.min.css';
+import 'swiper/css/a11y';
-import 'swiper/modules/autoplay/autoplay.min.css';
+import 'swiper/css/autoplay';
-import 'swiper/modules/navigation/navigation.min.css';
+import 'swiper/css/navigation';
 import Swiper, { Autoplay, Navigation, A11y } from 'swiper';
 
 export default {

src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue

@@ -325,10 +325,10 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 import axios from '../../../../../admin/js/axios';
-import 'swiper/swiper.min.css';
+import 'swiper/css';
-import 'swiper/modules/mousewheel/mousewheel.min.css';
+import 'swiper/css/mousewheel';
-import 'swiper/modules/navigation/navigation.min.css';
+import 'swiper/css/navigation';
-import 'swiper/modules/virtual/virtual.min.css';
+import 'swiper/css/virtual';
 import Swiper, {Navigation, Virtual, Mousewheel } from 'swiper';
 import CircularCounter from './circular-counter.vue';
 import SlidesHelpModal from './slides-help-modal.vue'

src/views/gutenberg-blocks/blocks/item-gallery/theme.js

@@ -2,14 +2,14 @@
 //
 // Counts on some HMTL markup to make a list of media links be displayed
 // as a carousel with a lightbox. Check examples in the end of the file 
-import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm';
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
-import PhotoSwipe from 'photoswipe/dist/photoswipe.esm';
+import PhotoSwipe from 'photoswipe';
 import 'photoswipe/dist/photoswipe.css';
 import Swiper, { Navigation, A11y, Thumbs } from 'swiper';
-import 'swiper/swiper.min.css';
+import 'swiper/css';
-import 'swiper/modules/navigation/navigation.min.css';
+import 'swiper/css/navigation';
-import 'swiper/modules/a11y/a11y.min.css';
+import 'swiper/css/a11y';
-import 'swiper/modules/controller/controller.min.css';
+import 'swiper/css/controller';
 
 const { __ } = wp.i18n;
 

webpack.common.js

@@ -1,5 +1,7 @@
 let path = require('path');
 const webpack = require('webpack');
+const ESLintPlugin = require('eslint-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 
 module.exports = {
@@ -30,21 +32,9 @@ module.exports = {
     module: {
         rules: [
             {
-                enforce: "pre",
                 test: /\.vue$/,
                 exclude: /node_modules/,
-                loader: "eslint-loader",
+                loader: 'vue-loader'
-                options: {
-                    fix: false,
-                },
-            },
-            {
-                test: /\.vue$/,
-                exclude: /node_modules/,
-                loader: 'vue-loader',
-                options: {
-                    prettify: false
-                }
             },
             {
                 test: /\.js$/,
@@ -76,27 +66,42 @@ module.exports = {
                     {
                         loader: 'sass-loader',
                         options: {
+                            sassOptions: {
                                 includePaths: [path.resolve(__dirname, './src/views/admin/scss/_variables.scss')]
                             }
+                        }
                     },
                 ],
             }
         ]
     },
-    node: {
+    resolve: {
-        fs: 'empty',
+        fallback: {
-        net: 'empty',
+            fs: false,
-        tls: 'empty'
+            net: false,
+            tls: false
+        }
     },
     performance: {
         hints: false
     },
     plugins: [
+        new VueLoaderPlugin({
+            prettify: false
+        }),
         new webpack.ProvidePlugin({
             'PhotoSwipe': 'PhotoSwipe'
         }),
         new MomentLocalesPlugin({
             localesToKeep: ['en', 'en-ca', 'en-nz', 'en-gb', 'es-au', 'el', 'es-in', 'pt-br', 'pt', 'es', 'es-us', 'es-mx', 'es-do', 'fr', 'fr-ch', 'fr-ca', 'sv'],
+        }),
+        new ESLintPlugin({
+            extensions: ['vue'],
+            exclude: ['/node_modules/']
         })
-    ]
+    ],
+    stats: {
+        errorDetails: true,
+        children: true
+    }
 };

webpack.dev.js

@@ -1,13 +1,12 @@
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = merge(common, {
     mode: 'development',
     devtool: 'source-map',
     plugins: [
-        new VueLoaderPlugin(),
         new BundleAnalyzerPlugin({
             openAnalyzer: false,
             analyzerMode: 'static'

webpack.prod.js

@@ -1,6 +1,5 @@
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
 const terserPlugin = new TerserPlugin({
@@ -21,9 +20,6 @@ const terserPlugin = new TerserPlugin({
 module.exports = merge(common, {
     mode: 'production',
     devtool: '',
-    plugins: [
-        new VueLoaderPlugin(),
-    ],
     optimization: {
         minimize: true,
         minimizer: [terserPlugin]