chore: update dependencies and use less

package.json

@@ -5,8 +5,8 @@
     "main": "dist/DPlayer.min.js",
     "scripts": {
         "start": "npm run dev",
-        "build": "cross-env NODE_ENV=production webpack --config webpack/prod.config.js --progress --display-error-details --colors",
-        "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack/dev.config.js --watch --colors",
+        "build": "cross-env NODE_ENV=production webpack --config webpack/prod.config.js --progress",
+        "dev": "cross-env NODE_ENV=development webpack serve --config webpack/dev.config.js",
         "test": "eslint src webpack",
         "format": "eslint \"**/*.js\" --fix && prettier \"**/*.{js,json,md}\" --write",
         "format:staged": "eslint \"**/*.js\" --fix && pretty-quick --staged --verbose --pattern \"**/*.{js,json,md}\"",
@@ -39,44 +39,46 @@
     "devDependencies": {
         "@babel/core": "^7.6.0",
         "@babel/preset-env": "^7.4.5",
-        "@vuepress/plugin-back-to-top": "1.7.1",
-        "@vuepress/plugin-google-analytics": "1.7.1",
-        "@vuepress/plugin-pwa": "1.7.1",
+        "@vuepress/plugin-back-to-top": "1.9.7",
+        "@vuepress/plugin-google-analytics": "1.9.7",
+        "@vuepress/plugin-pwa": "1.9.7",
         "art-template": "4.13.2",
         "art-template-loader": "1.4.3",
-        "autoprefixer": "^9.6.1",
+        "autoprefixer": "^10.4.8",
         "babel-loader": "^8.0.6",
         "cross-env": "^7.0.0",
-        "css-loader": "^5.0.0",
-        "cssnano": "^4.1.10",
-        "eslint": "^7.0.0",
-        "eslint-config-prettier": "^6.3.0",
+        "css-loader": "^6.7.1",
+        "cssnano": "^5.1.13",
+        "eslint": "^8.22.0",
+        "eslint-config-prettier": "^8.5.0",
         "eslint-loader": "^4.0.0",
-        "eslint-plugin-prettier": "^3.1.1",
-        "exports-loader": "^1.0.0",
+        "eslint-plugin-prettier": "^4.2.1",
+        "exports-loader": "^4.0.0",
         "file-loader": "^6.0.0",
-        "git-revision-webpack-plugin": "^3.0.3",
-        "mini-css-extract-plugin": "1.3.0",
-        "node-sass": "^5.0.0",
-        "postcss-loader": "^3.0.0",
+        "git-revision-webpack-plugin": "^5.0.0",
+        "less": "^4.1.3",
+        "less-loader": "^11.0.0",
+        "mini-css-extract-plugin": "2.6.1",
+        "postcss": "^8.4.16",
+        "postcss-loader": "^7.0.1",
+        "postcss-preset-env": "^7.7.2",
         "prettier": "^2.0.4",
         "prettier-check": "^2.0.0",
         "pretty-quick": "^3.0.0",
-        "sass-loader": "^10.0.0",
         "strip-loader": "^0.1.2",
-        "style-loader": "^2.0.0",
+        "style-loader": "^3.3.1",
         "svg-inline-loader": "0.8.2",
         "template-string-optimize-loader": "^3.0.0",
         "url-loader": "^4.1.0",
-        "vuepress": "1.7.1",
-        "webpack": "^4.40.2",
-        "webpack-cli": "3.3.12",
-        "webpack-dev-server": "^3.8.1",
+        "vuepress": "1.9.7",
+        "webpack": "^5.74.0",
+        "webpack-cli": "4.10.0",
+        "webpack-dev-server": "^4.10.0",
         "yorkie": "^2.0.0"
     },
     "dependencies": {
-        "axios": "0.21.0",
+        "axios": "0.27.2",
         "balloon-css": "^1.0.3",
-        "promise-polyfill": "8.2.0"
+        "promise-polyfill": "8.2.3"
     }
 }

src/css/bezel.less

@@ -60,11 +60,11 @@
             animation: diplayer-loading-dot-fade .8s ease infinite;
             opacity: 0;
             transform-origin: 4px 4px;
-            @for $i from 7 through 1 {
-                &.diplayer-loading-dot-#{$i} {
-                    animation-delay: .1s * $i;
-                }
+            each(range(7), {
+                &.diplayer-loading-dot-@{value} {
+                    animation-delay: (@value * 0.1s);
                 }
+            });
         }
         @keyframes diplayer-loading-dot-fade {
             0% {

src/js/index.js

@@ -1,4 +1,4 @@
-import '../css/index.scss';
+import '../css/index.less';
 import DPlayer from './player';
 
 /* global DPLAYER_VERSION GIT_HASH */

webpack/dev.config.js

@@ -1,9 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
-const GitRevisionPlugin = require('git-revision-webpack-plugin');
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
 const gitRevisionPlugin = new GitRevisionPlugin();
-const autoprefixer = require('autoprefixer');
-const cssnano = require('cssnano');
 
 module.exports = {
     mode: 'development',
@@ -26,7 +24,13 @@ module.exports = {
 
     resolve: {
         modules: ['node_modules'],
-        extensions: ['.js', '.scss'],
+        extensions: ['.js', '.less'],
+        fallback: {
+            dgram: false,
+            fs: false,
+            net: false,
+            tls: false,
+        },
     },
 
     module: {
@@ -45,7 +49,7 @@ module.exports = {
                 ],
             },
             {
-                test: /\.scss$/,
+                test: /\.less$/,
                 use: [
                     'style-loader',
                     {
@@ -57,10 +61,12 @@ module.exports = {
                     {
                         loader: 'postcss-loader',
                         options: {
-                            plugins: [autoprefixer, cssnano],
+                            postcssOptions: {
+                                plugins: ['postcss-preset-env'],
                             },
                         },
-                    'sass-loader',
+                    },
+                    'less-loader',
                 ],
             },
             {
@@ -82,17 +88,11 @@ module.exports = {
     },
 
     devServer: {
+        static: {
+            directory: path.join(__dirname, '..', 'demo'),
+        },
         compress: true,
-        contentBase: path.resolve(__dirname, '..', 'demo'),
-        clientLogLevel: 'none',
-        quiet: false,
         open: true,
-        historyApiFallback: {
-            disableDotRule: true,
-        },
-        watchOptions: {
-            ignored: /node_modules/,
-        },
     },
 
     plugins: [
@@ -102,13 +102,6 @@ module.exports = {
         }),
     ],
 
-    node: {
-        dgram: 'empty',
-        fs: 'empty',
-        net: 'empty',
-        tls: 'empty',
-    },
-
     performance: {
         hints: false,
     },

webpack/prod.config.js

@@ -1,9 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
-const GitRevisionPlugin = require('git-revision-webpack-plugin');
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
 const gitRevisionPlugin = new GitRevisionPlugin();
-const autoprefixer = require('autoprefixer');
-const cssnano = require('cssnano');
 
 module.exports = {
     mode: 'production',
@@ -28,7 +26,13 @@ module.exports = {
 
     resolve: {
         modules: ['node_modules'],
-        extensions: ['.js', '.scss'],
+        extensions: ['.js', '.less'],
+        fallback: {
+            dgram: false,
+            fs: false,
+            net: false,
+            tls: false,
+        },
     },
 
     module: {
@@ -48,7 +52,7 @@ module.exports = {
                 ],
             },
             {
-                test: /\.scss$/,
+                test: /\.less$/,
                 use: [
                     'style-loader',
                     {
@@ -60,10 +64,12 @@ module.exports = {
                     {
                         loader: 'postcss-loader',
                         options: {
-                            plugins: [autoprefixer, cssnano],
+                            postcssOptions: {
+                                plugins: ['postcss-preset-env'],
                             },
                         },
-                    'sass-loader',
+                    },
+                    'less-loader',
                 ],
             },
             {
@@ -90,11 +96,4 @@ module.exports = {
             GIT_HASH: JSON.stringify(gitRevisionPlugin.version()),
         }),
     ],
-
-    node: {
-        dgram: 'empty',
-        fs: 'empty',
-        net: 'empty',
-        tls: 'empty',
-    },
 };