Move fomantic and jQuery to main webpack bundle (#11997)

This saves around 3 MB binary size by not including useless fomantic
files in the build. Also, this allows us to move jQuery into the main
bundle as well which eliminates a few HTTP requests.

Also included are webpack config changes:

- split less and css loaders to speed up compliation
- enable css sourcemaps
- switch css minfier plugin to cssnano-webpack-plugin which works better
  for sourcemaps than the previous plugin

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

1 files changed, 63 insertions, 29 deletions

diff --git a/webpack.config.js b/webpack.config.js
index 09caeb4029..fa96f42e91 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,12 +1,10 @@
-const cssnano = require('cssnano');
 const fastGlob = require('fast-glob');
 const wrapAnsi = require('wrap-ansi');
+const CssNanoPlugin = require('cssnano-webpack-plugin');
 const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const PostCSSPresetEnv = require('postcss-preset-env');
-const PostCSSSafeParser = require('postcss-safe-parser');
 const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
@@ -24,19 +22,31 @@ for (const path of glob('web_src/less/themes/*.less')) {
 
 const isProduction = process.env.NODE_ENV !== 'development';
 
+const filterCssImport = (parsedImport, cssFile) => {
+  const url = parsedImport && parsedImport.url ? parsedImport.url : parsedImport;
+  const importedFile = url.replace(/[?#].+/, '').toLowerCase();
+  if (cssFile.includes('monaco')) return true;
+  if (cssFile.includes('fomantic')) {
+    if (/brand-icons/.test(importedFile)) return false;
+    if (/(eot|ttf|woff)$/.test(importedFile)) return false;
+    return true;
+  }
+  return cssFile.includes('node_modules');
+};
+
 module.exports = {
   mode: isProduction ? 'production' : 'development',
   entry: {
     index: [
+      resolve(__dirname, 'web_src/js/jquery.js'),
+      resolve(__dirname, 'web_src/fomantic/build/semantic.js'),
       resolve(__dirname, 'web_src/js/index.js'),
+      resolve(__dirname, 'web_src/fomantic/build/semantic.css'),
       resolve(__dirname, 'web_src/less/index.less'),
     ],
     swagger: [
       resolve(__dirname, 'web_src/js/standalone/swagger.js'),
     ],
-    jquery: [
-      resolve(__dirname, 'web_src/js/jquery.js'),
-    ],
     serviceworker: [
       resolve(__dirname, 'web_src/js/serviceworker.js'),
     ],
@@ -66,12 +76,9 @@ module.exports = {
           },
         },
       }),
-      new OptimizeCSSAssetsPlugin({
-        cssProcessor: cssnano,
-        cssProcessorOptions: {
-          parser: PostCSSSafeParser,
-        },
-        cssProcessorPluginOptions: {
+      new CssNanoPlugin({
+        sourceMap: true,
+        cssnanoOptions: {
           preset: [
             'default',
             {
@@ -91,10 +98,10 @@ module.exports = {
         monaco: {
           test: /monaco-editor/,
           name: 'monaco',
-          chunks: 'async'
-        }
-      }
-    }
+          chunks: 'async',
+        },
+      },
+    },
   },
   module: {
     rules: [
@@ -150,12 +157,41 @@ module.exports = {
                 ],
                 '@babel/plugin-proposal-object-rest-spread',
               ],
+              generatorOpts: {
+                compact: false,
+              },
             },
           },
         ],
       },
       {
-        test: /\.(less|css)$/i,
+        test: /.css$/i,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              url: filterCssImport,
+              import: filterCssImport,
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [
+                PostCSSPresetEnv(),
+              ],
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /.less$/i,
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
@@ -164,11 +200,10 @@ module.exports = {
             loader: 'css-loader',
             options: {
               importLoaders: 2,
-              url: (_url, resourcePath) => {
-                // only resolve URLs for dependencies
-                return resourcePath.includes('node_modules');
-              },
-            }
+              url: filterCssImport,
+              import: filterCssImport,
+              sourceMap: true,
+            },
           },
           {
             loader: 'postcss-loader',
@@ -176,10 +211,14 @@ module.exports = {
               plugins: () => [
                 PostCSSPresetEnv(),
               ],
+              sourceMap: true,
             },
           },
           {
             loader: 'less-loader',
+            options: {
+              sourceMap: true,
+            },
           },
         ],
       },
@@ -232,9 +271,10 @@ module.exports = {
       chunkFilename: 'css/[name].css',
     }),
     new SourceMapDevToolPlugin({
-      filename: 'js/[name].js.map',
+      filename: '[file].map',
       include: [
         'js/index.js',
+        'css/index.css',
       ],
     }),
     new SpriteLoaderPlugin({
@@ -251,12 +291,6 @@ module.exports = {
       modulesDirectories: [
         resolve(__dirname, 'node_modules'),
       ],
-      additionalModules: [
-        {
-          name: 'fomantic-ui',
-          directory: resolve(__dirname, 'node_modules/fomantic-ui'),
-        },
-      ],
       renderLicenses: (modules) => {
         const line = '-'.repeat(80);
         return modules.map((module) => {