add css extraction and minification to webpack (#9944)

This changes the CSS output of webpack to output to the public/css
directory instead of inling CSS in JS. This enables CSS minification and
autoprefixer based on browserslist which would otherwise not be
possible.

The result of this change is two new output files currently:

- public/css/swagger.css
- public/css/gitgraph.css

Co-authored-by: techknowlogick <matti@mdranta.net>

1 files changed, 69 insertions, 24 deletions

diff --git a/webpack.config.js b/webpack.config.js
index b4b034d615..356627b03b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,6 +2,11 @@ const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 const { SourceMapDevToolPlugin } = require('webpack');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const cssnano = require('cssnano');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const PostCSSSafeParser = require('postcss-safe-parser');
+const PostCSSPresetEnv = require('postcss-preset-env');
 
 module.exports = {
   mode: 'production',
@@ -12,28 +17,46 @@ module.exports = {
   },
   devtool: false,
   output: {
-    path: path.resolve(__dirname, 'public/js'),
-    filename: '[name].js',
-    chunkFilename: '[name].js',
+    path: path.resolve(__dirname, 'public'),
+    filename: 'js/[name].js',
+    chunkFilename: 'js/[name].js',
   },
   optimization: {
     minimize: true,
-    minimizer: [new TerserPlugin({
-      sourceMap: true,
-      extractComments: false,
-      terserOptions: {
-        output: {
-          comments: false,
+    minimizer: [
+      new TerserPlugin({
+        sourceMap: true,
+        extractComments: false,
+        terserOptions: {
+          output: {
+            comments: false,
+          },
         },
-      },
-    })],
+      }),
+      new OptimizeCSSAssetsPlugin({
+        cssProcessor: cssnano,
+        cssProcessorOptions: {
+          parser: PostCSSSafeParser,
+        },
+        cssProcessorPluginOptions: {
+          preset: [
+            'default',
+            {
+              discardComments: {
+                removeAll: true,
+              },
+            },
+          ],
+        },
+      }),
+    ],
   },
   module: {
     rules: [
       {
         test: /\.vue$/,
         exclude: /node_modules/,
-        loader: 'vue-loader'
+        loader: 'vue-loader',
       },
       {
         test: /\.js$/,
@@ -48,8 +71,8 @@ module.exports = {
                   {
                     useBuiltIns: 'usage',
                     corejs: 3,
-                  }
-                ]
+                  },
+                ],
               ],
               plugins: [
                 [
@@ -60,24 +83,46 @@ module.exports = {
                 ],
                 '@babel/plugin-proposal-object-rest-spread',
               ],
-            }
+            },
           },
         ],
       },
       {
         test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [
+                PostCSSPresetEnv(),
+              ],
+            },
+          },
+        ],
       },
-    ]
+    ],
   },
   plugins: [
     new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].css',
+      chunkFilename: 'css/[name].css',
+    }),
     new SourceMapDevToolPlugin({
-      filename: '[name].js.map',
+      filename: 'js/[name].js.map',
       exclude: [
-        'gitgraph.js',
-        'jquery.js',
-        'swagger.js',
+        'js/gitgraph.js',
+        'js/jquery.js',
+        'js/swagger.js',
       ],
     }),
   ],
@@ -85,10 +130,10 @@ module.exports = {
     maxEntrypointSize: 512000,
     maxAssetSize: 512000,
     assetFilter: (filename) => {
-      return !filename.endsWith('.map') && filename !== 'swagger.js';
-    }
+      return !filename.endsWith('.map') && filename !== 'js/swagger.js';
+    },
   },
   resolve: {
     symlinks: false,
-  }
+  },
 };