Add/webpack 5 support

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["env"]
-}
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-proposal-optional-chaining"]
+}

.eslintrc

@@ -1,9 +1,10 @@
 {
+  "parser": "babel-eslint",
   "extends": [
-    "plugin:vue/essential"
+    "plugin:vue/vue3-recommended"
   ],
   "rules": {
-    "indent": ["error", 2]
+    "indent": ["error", 2],
   },
   "parserOptions": {
     "ecmaVersion": 6,

.travis.yml

@@ -2,11 +2,11 @@ language: php
 sudo: false
 
 php:
-  - 7.1
+  - 7.3
 
 env:
-  - TRAVIS_NODE_VERSION="6"
-  - TRAVIS_NODE_VERSION="7"
+  - TRAVIS_NODE_VERSION="10"
+  - TRAVIS_NODE_VERSION="14"
 
 notifications:
   email:

build/app.config.js

@@ -44,7 +44,7 @@ module.exports = merge({
     },
 
     image: {
-      filename: env('FILENAME_IMAGE', 'images/[path][name].[ext]')
+      filename: env('FILENAME_IMAGE', 'images/[name].[ext]')
     },
 
     javascript: {

build/rules/external.fonts.js

@@ -7,10 +7,8 @@ const config = require('../app.config')
 module.exports = {
   test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
   include: config.paths.external,
-  loader: 'file-loader',
-  options: {
-    context: config.paths.fonts,
-    publicPath: config.paths.relative,
-    name: config.outputs.external.font.filename
-  }
+  type: 'asset/resource',
+  generator: {
+    filename: config.outputs.external.font.filename,
+  },
 }

build/rules/external.images.js

@@ -7,9 +7,8 @@ const config = require('../app.config')
 module.exports = {
   test: /\.(png|jpe?g|gif|svg)$/,
   include: config.paths.external,
-  loader: 'file-loader',
-  options: {
-    publicPath: config.paths.relative,
-    name: config.outputs.external.image.filename
-  }
+  type: 'asset/resource',
+  generator: {
+    filename: config.outputs.external.image.filename,
+  },
 }

build/rules/fonts.js

@@ -6,10 +6,8 @@ const config = require('../app.config')
  */
 module.exports = {
   test: /\.(eot|ttf|woff|woff2|svg)(\?\S*)?$/,
-  include: config.paths.fonts,
-  loader: 'file-loader',
-  options: {
-    publicPath: config.paths.relative,
-    name: config.outputs.font.filename,
-  }
+  type: 'asset/resource',
+  generator: {
+    filename: config.outputs.font.filename,
+  },
 }

build/rules/images.js

@@ -7,11 +7,8 @@ const config = require('../app.config')
 module.exports = {
   test: /\.(png|jpe?g|gif|svg)$/,
   include: config.paths.images,
-  loader: 'file-loader',
-  options: {
-    context: config.paths.images,
-    publicPath: config.paths.relative,
-    name: config.outputs.image.filename,
-    emitFile: false
-  }
+  type: 'asset/resource',
+  generator: {
+    filename: config.outputs.image.filename,
+  },
 }

build/rules/javascript.js

@@ -6,5 +6,9 @@ const config = require('../app.config')
  */
 module.exports = {
   test: /\.js$/,
-  loader: ['babel-loader', 'eslint-loader']
+  exclude: /node_modules/,
+  loader: 'babel-loader',
+  options: {
+    presets: ['@babel/preset-env'],
+  },
 }

build/rules/sass.js

@@ -1,7 +1,7 @@
 const isdev = require('isdev')
 const autoprefixer = require('autoprefixer')
 
-const ExtractTextPlugin = require("extract-text-webpack-plugin")
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const config = require('../app.config')
 
@@ -12,32 +12,41 @@ const config = require('../app.config')
 module.exports = {
   test: /\.s[ac]ss$/,
   include: config.paths.sass,
-  loader: ExtractTextPlugin.extract({
-    use: [
-      {
-        loader: 'css-loader',
-        options: {
-          sourceMap: isdev
-        }
-      },
-
-      {
-        loader: 'postcss-loader',
-        options: {
-          sourceMap: true,
-          plugins: () => [
-            autoprefixer(config.settings.autoprefixer)
-          ]
-        }
-      },
+  use: [
+    {
+      loader: MiniCssExtractPlugin.loader,
+      options: {
+        publicPath: (resourcePath, context) => {
+          return '../';
+        },
+      }
+    },
+    {
+      loader: 'css-loader',
+      options: {
+        sourceMap: isdev,
+      }
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        sourceMap: true,
+        postcssOptions: {
+          plugins: [
+            [
+              "autoprefixer",
+              config.settings.autoprefixer
+            ],
+          ],
+        },
+      }
+    },
 
-      {
-        loader: 'sass-loader',
-        options: {
-          sourceMap: true
-        }
+    {
+      loader: 'sass-loader',
+      options: {
+        sourceMap: true
       }
-    ],
-    fallback: 'style-loader'
-  })
+    }
+  ],
 }

build/webpack.config.js

@@ -1,14 +1,14 @@
-const path = require('path')
 const isdev = require('isdev')
 const webpack = require('webpack')
-const autoprefixer = require('autoprefixer')
 
+const ESLintPlugin = require('eslint-webpack-plugin')
 const CopyPlugin = require('copy-webpack-plugin')
-const CleanPlugin = require('clean-webpack-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const StyleLintPlugin = require('stylelint-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
-const { default: ImageminPlugin } = require('imagemin-webpack-plugin')
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
 const vueRule = require('./rules/vue')
 const sassRule = require('./rules/sass')
@@ -28,6 +28,13 @@ module.exports = {
    */
   devtool: (isdev && config.settings.sourceMaps) ? 'source-map' : undefined,
 
+  /**
+   * Providing the mode configuration option tells webpack to use its built-in optimizations accordingly.
+   *
+   * @type {string|undefined}
+   */
+  mode: isdev ? 'development' : 'production',
+
   /**
    * Application entry files for building.
    *
@@ -91,18 +98,22 @@ module.exports = {
    * @type {Array}
    */
   plugins: [
+    new ESLintPlugin(),
+    new VueLoaderPlugin(),
     new webpack.LoaderOptionsPlugin({ minimize: !isdev }),
-    new ExtractTextPlugin(config.outputs.css),
-    new CleanPlugin(config.paths.public, { root: config.paths.root }),
-    new CopyPlugin([{
-      context: config.paths.images,
-      from: {
-        glob: `${config.paths.images}/**/*`,
-        flatten: true,
-        dot: false
-      },
-      to: config.outputs.image.filename,
-    }]),
+    new MiniCssExtractPlugin({
+      filename: config.outputs.css.filename,
+    }),
+    new CleanWebpackPlugin({ verbose: true }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: `${config.paths.images}/**/*`,
+          to: config.outputs.image.filename,
+          noErrorOnMissing: true,
+        },
+      ],
+    }),
   ]
 }
 
@@ -136,28 +147,29 @@ if (config.settings.browserSync) {
  */
 if (! isdev) {
   module.exports.plugins.push(
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    })
-  )
-
-  module.exports.plugins.push(
-    new webpack.optimize.UglifyJsPlugin({
-      comments: isdev,
-      compress: { warnings: false },
-      sourceMap: isdev
-    })
-  )
-
-  module.exports.plugins.push(
-    new ImageminPlugin({
-      test: /\.(jpe?g|png|gif|svg)$/i,
-      optipng: { optimizationLevel: 7 },
-      gifsicle: { optimizationLevel: 3 },
-      pngquant: { quality: '65-90', speed: 4 },
-      svgo: { removeUnknownsAndDefaults: false, cleanupIDs: false }
-    })
+    new ImageMinimizerPlugin({
+      minimizerOptions: {
+        // Lossless optimization with custom option
+        // Feel free to experiment with options for better result for you
+        plugins: [
+          ['gifsicle', { interlaced: true, optimizationLevel: 3 }],
+          ['jpegtran', { progressive: true }],
+          ['optipng', { optimizationLevel: 7 }],
+          ['pngquant', { quality: '65-90', speed: 4 }],
+          [
+            'svgo',
+            {
+              plugins: [
+                {
+                  removeViewBox: false,
+                  removeUnknownsAndDefaults: false,
+                  cleanupIDs: false
+                },
+              ],
+            },
+          ],
+        ],
+      },
+    }),
   )
 }