fix: css bundle

CoCreate-app · Apr 1, 2021 · 41d9563 · 41d9563
1 parent c91e6be
commit 41d9563
Show file tree

Hide file tree

Showing 3 changed files with 889 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
     "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.1.2",
+    "css-minimizer-webpack-plugin": "^1.3.0",
     "file-loader": "^6.2.0",
     "html-webpack-inline-source-plugin": "^0.0.10",
     "html-webpack-plugin": "^5.3.1",

diff --git a/webpack.config.js b/webpack.config.js
@@ -9,7 +9,7 @@ let isProduction = process.env.NODE_ENV === 'production';
 const getLogger = require('webpack-log');
 const log = getLogger({ name: 'webpack-batman' });
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 log.info(__filename);
 
 // This is main configuration object.
@@ -40,7 +40,7 @@ module.exports = {
         //     else
         //         return isProduction ? '[name].min.js' : '[name].js';
         // },
-
+        chunkFilename: isProduction ? '[name].min.js' : '[name].js',
         libraryTarget: 'umd',
         libraryExport: 'default',
         library: 'CoCreate',
@@ -54,8 +54,8 @@ module.exports = {
         new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
+      filename: isProduction ? '[name].min.css' : '[name].css',
+      chunkFilename: '[name].min.css',
     }),
     ],
 
@@ -98,21 +98,22 @@ module.exports = {
 
     optimization: {
         minimize: true,
-        // minimizer: [
-        //     new TerserPlugin({
-        //         extractComments: true,
-        //         // cache: true,
-        //         parallel: true,
-        //         // sourceMap: true, // Must be set to true if using source-maps in production
-        //         terserOptions: {
-        //             // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-        //             // extractComments: 'all',
-        //             compress: {
-        //                 drop_console: true,
-        //             },
-        //         },
-        //     }),
-        // ],
+        minimizer: [
+            new CssMinimizerPlugin(),
+            new TerserPlugin({
+                extractComments: true,
+                // cache: true,
+                parallel: true,
+                // sourceMap: true, // Must be set to true if using source-maps in production
+                terserOptions: {
+                    // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+                    // extractComments: 'all',
+                    compress: {
+                        drop_console: true,
+                    },
+                },
+            }),
+        ],
         splitChunks: {
             chunks: 'all',
             minSize: 1,