Merge branch 'from/develop/tusooa/webpack-5' into 'develop'

Webpack 5 support

See merge request pleroma/pleroma-fe!1601

build/dev-server.js

@@ -29,18 +29,20 @@ var devMiddleware = require('webpack-dev-middleware')(compiler, {
 })
 
 var hotMiddleware = require('webpack-hot-middleware')(compiler)
-// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-    // FIXME: This supposed to reload whole page when index.html is changed,
-    // however now it reloads entire page on every breath, i suppose the order
-    // of plugins changed or something. It's a minor thing and douesn't hurt
-    // disabling it, constant reloads hurt much more
 
-    // hotMiddleware.publish({ action: 'reload' })
-    // cb()
-  })
-})
+// FIXME: The statement below gives error about hooks being required in webpack 5.
+// force page reload when html-webpack-plugin template changes
+// compiler.plugin('compilation', function (compilation) {
+//   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+//     // FIXME: This supposed to reload whole page when index.html is changed,
+//     // however now it reloads entire page on every breath, i suppose the order
+//     // of plugins changed or something. It's a minor thing and douesn't hurt
+//     // disabling it, constant reloads hurt much more
+
+//     // hotMiddleware.publish({ action: 'reload' })
+//     // cb()
+//   })
+// })
 
 // proxy api requests
 Object.keys(proxyTable).forEach(function (context) {
@@ -48,7 +50,7 @@ Object.keys(proxyTable).forEach(function (context) {
   if (typeof options === 'string') {
     options = { target: options }
   }
-  app.use(proxyMiddleware(context, options))
+  app.use(proxyMiddleware.createProxyMiddleware(context, options))
 })
 
 // handle fallback for HTML5 history API

build/webpack.base.conf.js

@@ -2,7 +2,7 @@ var path = require('path')
 var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
-var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
+var ServiceWorkerWebpackPlugin = require('serviceworker-webpack5-plugin')
 var CopyPlugin = require('copy-webpack-plugin');
 var { VueLoaderPlugin } = require('vue-loader')
 var ESLintPlugin = require('eslint-webpack-plugin');
@@ -42,6 +42,10 @@ module.exports = {
       'assets': path.resolve(__dirname, '../src/assets'),
       'components': path.resolve(__dirname, '../src/components'),
       'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
+    },
+    fallback: {
+      'querystring': require.resolve('querystring-es3'),
+      'url': require.resolve('url/')
     }
   },
   module: {
@@ -78,22 +82,16 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            name: utils.assetsPath('img/[name].[hash:7].[ext]')
-          }
+        type: 'asset',
+        generator: {
+          filename: utils.assetsPath('img/[name].[hash:7][ext]')
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        use: {
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-          }
+        type: 'asset',
+        generator: {
+          filename: utils.assetsPath('fonts/[name].[hash:7][ext]')
         }
       },
       {
@@ -117,9 +115,8 @@ module.exports = {
     new CopyPlugin({
       patterns: [
         {
-          from: "node_modules/@ruffle-rs/ruffle/*",
-          to: "static/ruffle",
-          flatten: true
+          from: "node_modules/@ruffle-rs/ruffle/**/*",
+          to: "static/ruffle/[name][ext]"
         },
       ],
       options: {

build/webpack.dev.conf.js

@@ -16,7 +16,7 @@ module.exports = merge(baseWebpackConfig, {
   },
   mode: 'development',
   // eval-source-map is faster for development
-  devtool: '#eval-source-map',
+  devtool: 'eval-source-map',
   plugins: [
     new webpack.DefinePlugin({
       'process.env': config.dev.env,

build/webpack.prod.conf.js

@@ -5,6 +5,7 @@ var webpack = require('webpack')
 var merge = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
 var MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var env = process.env.NODE_ENV === 'testing'
     ? require('../config/test.env')
@@ -19,12 +20,16 @@ var webpackConfig = merge(baseWebpackConfig, {
   module: {
     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true })
   },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  devtool: config.build.productionSourceMap ? 'source-map' : false,
   optimization: {
     minimize: true,
     splitChunks: {
       chunks: 'all'
-    }
+    },
+    minimizer: [
+      `...`,
+      new CssMinimizerPlugin()
+    ]
   },
   output: {
     path: config.build.assetsRoot,
@@ -60,9 +65,7 @@ var webpackConfig = merge(baseWebpackConfig, {
         ignoreCustomComments: [/server-generated-meta/]
         // more options:
         // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
+      }
     }),
     // split vendor js into its own file
     // extract webpack runtime and module manifest to its own file in order to

package.json

@@ -34,10 +34,12 @@
     "escape-html": "1.0.3",
     "js-cookie": "3.0.1",
     "localforage": "1.10.0",
-    "parse-link-header": "1.0.1",
+    "parse-link-header": "2.0.0",
     "phoenix": "1.6.2",
     "punycode.js": "2.1.0",
     "qrcode": "1.5.0",
+    "querystring-es3": "^0.2.1",
+    "url": "^0.11.0",
     "utf8": "3.0.0",
     "vue": "3.2.37",
     "vue-i18n": "9.2.2",
@@ -47,42 +49,41 @@
   },
   "devDependencies": {
     "@babel/core": "7.18.10",
+    "@babel/eslint-parser": "7.18.9",
     "@babel/plugin-transform-runtime": "7.18.10",
     "@babel/preset-env": "7.18.10",
     "@babel/register": "7.18.9",
-    "@babel/eslint-parser": "7.18.9",
     "@intlify/vue-i18n-loader": "5.0.0",
     "@ungap/event-target": "0.2.3",
     "@vue/babel-helper-vue-jsx-merge-props": "1.2.1",
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/compiler-sfc": "3.2.37",
     "@vue/test-utils": "2.0.2",
-    "autoprefixer": "6.7.7",
+    "autoprefixer": "^10.4.8",
     "babel-loader": "8.2.5",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.3.6",
     "chalk": "1.1.3",
     "chromedriver": "104.0.0",
     "connect-history-api-fallback": "2.0.0",
-    "copy-webpack-plugin": "6.4.1",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-spawn": "7.0.3",
-    "css-loader": "0.28.11",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
     "custom-event-polyfill": "1.0.7",
     "eslint": "8.22.0",
     "eslint-config-standard": "17.0.0",
     "eslint-formatter-friendly": "7.0.0",
-    "eslint-webpack-plugin": "2.7.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-n": "15.2.4",
     "eslint-plugin-promise": "6.0.0",
     "eslint-plugin-vue": "9.3.0",
+    "eslint-webpack-plugin": "^3.2.0",
     "eventsource-polyfill": "0.9.6",
     "express": "4.18.1",
-    "file-loader": "3.0.1",
     "function-bind": "1.1.1",
-    "html-webpack-plugin": "3.2.0",
-    "http-proxy-middleware": "0.21.0",
-    "inject-loader": "2.0.1",
+    "html-webpack-plugin": "^5.5.0",
+    "http-proxy-middleware": "2.0.6",
     "iso-639-1": "2.1.15",
     "isparta-loader": "2.0.0",
     "json-loader": "0.5.7",
@@ -94,31 +95,30 @@
     "karma-sinon-chai": "2.0.2",
     "karma-sourcemap-loader": "0.3.8",
     "karma-spec-reporter": "0.0.34",
-    "karma-webpack": "4.0.2",
+    "karma-webpack": "5.0.0",
     "lodash": "4.17.21",
     "lolex": "1.6.0",
-    "mini-css-extract-plugin": "0.12.0",
+    "mini-css-extract-plugin": "^2.6.1",
     "mocha": "3.5.3",
     "nightwatch": "0.9.21",
     "opn": "4.0.2",
     "ora": "0.4.1",
-    "postcss-loader": "3.0.0",
-    "raw-loader": "0.5.1",
+    "postcss": "8.4.16",
+    "postcss-loader": "^7.0.1",
     "sass": "1.54.4",
-    "sass-loader": "7.3.1",
+    "sass-loader": "^13.0.2",
     "selenium-server": "2.53.1",
     "semver": "5.7.1",
-    "serviceworker-webpack-plugin": "1.0.1",
+    "serviceworker-webpack5-plugin": "2.0.0",
     "shelljs": "0.8.5",
     "sinon": "2.4.1",
     "sinon-chai": "2.14.0",
     "stylelint": "13.13.1",
     "stylelint-config-standard": "20.0.0",
     "stylelint-rscss": "0.4.0",
-    "url-loader": "1.1.2",
-    "vue-loader": "16.8.3",
+    "vue-loader": "^17.0.0",
     "vue-style-loader": "4.1.3",
-    "webpack": "4.46.0",
+    "webpack": "5.74.0",
     "webpack-dev-middleware": "3.7.3",
     "webpack-hot-middleware": "2.25.2",
     "webpack-merge": "0.20.0"

src/services/push/push.js

@@ -1,4 +1,4 @@
-import runtime from 'serviceworker-webpack-plugin/lib/runtime'
+import runtime from 'serviceworker-webpack5-plugin/lib/runtime'
 
 function urlBase64ToUint8Array (base64String) {
   const padding = '='.repeat((4 - base64String.length % 4) % 4)

test/unit/karma.conf.js

@@ -16,7 +16,7 @@ const webpackConfig = merge(baseConfig, {
   module: {
     rules: utils.styleLoaders()
   },
-  devtool: '#inline-source-map',
+  devtool: 'inline-source-map',
   // vue: {
   //   loaders: {
   //     js: 'isparta'