feat: use OptimizeCSSAssetsPlugin for css assets

package.json

@@ -56,6 +56,7 @@
     "file-loader": "^4.3.0",
     "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.13.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
     "prettier": "^1.19.1",
     "resolve-url-loader": "^3.1.1",

webpack.config.js

@@ -8,6 +8,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WriteWebpackPlugin = require('write-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const ExtensionReloader = require('webpack-extension-reloader');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
 
 const manifestInput = require('./src/manifest');
@@ -94,7 +95,7 @@ module.exports = {
                     {
                         loader: 'css-loader',
                         options: {
-                            sourceMap: true,
+                            sourceMap: nodeEnv === 'development' ? true : false,
                         },
                     },
                     {
@@ -153,6 +154,11 @@ module.exports = {
                 },
                 extractComments: false,
             }),
+            new OptimizeCSSAssetsPlugin({
+                cssProcessorPluginOptions: {
+                    preset: ['default', { discardComments: { removeAll: true } }],
+                },
+            }),
             new ZipPlugin({
                 path: path.resolve(__dirname, 'extension'),
                 extension: `${getExtensionFileType(targetBrowser)}`,