feat(app): use mini-css plugin

mainly for CSS extraction in prod, includes CSS minification
angular-fullstack · Jun 19, 2018 · 3ac870a · 3ac870a
1 parent 8f22699
commit 3ac870a
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 17 deletions.
diff --git a/templates/app/_package.json b/templates/app/_package.json
@@ -155,6 +155,9 @@
     "extract-text-webpack-plugin": "4.0.0-beta.0",
     "html-webpack-plugin": "^3.2.0",
     "html-webpack-harddisk-plugin": "~0.2.0",
+    "mini-css-extract-plugin": "~0.4.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.2",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     <%_ if(filters.pug) { _%>
     "pug-html-loader": "^1.1.5",<% } %>
     "typescript": "~2.9.0",
@@ -236,5 +239,12 @@
     "start:client": "webpack-dev-server --config webpack.dev.js",
     "start:server": "node server"
   },
+  "sideEffects": [
+    "*.css",
+    "*.less",
+    "*.sass",
+    "*.scss",
+    "*.styl"
+  ],
   "private": true
 }
diff --git a/templates/app/webpack.make.js b/templates/app/webpack.make.js
@@ -3,7 +3,10 @@ const _ = require('lodash');
 const CompressionPlugin = require('compression-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const path = require('path');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const webpack = require('webpack');
 
 module.exports = function makeWebpackConfig(options) {
@@ -193,7 +196,11 @@ module.exports = function makeWebpackConfig(options) {
             // Reference: https://github.com/postcss/postcss-loader
             // Postprocess your css with PostCSS plugins
             test: /\.css$/,
-            use: ['style-loader', 'css-loader', 'postcss-loader'],
+            use: [
+                DEV ? 'style-loader' : MiniCssExtractPlugin.loader,
+                'css-loader',
+                'postcss-loader',
+            ],
             include: [
                 path.resolve(__dirname, 'node_modules/bootstrap/dist/css/*.css'),
                 path.resolve(__dirname, 'client/app/app.css')
@@ -202,7 +209,11 @@ module.exports = function makeWebpackConfig(options) {
             // CSS LOADER
             // Reference: https://github.com/webpack/css-loader
             test: /\.css$/,
-            use: ['to-string-loader', 'css-loader?sourceMap', 'postcss-loader'],
+            use: [
+                'to-string-loader',
+                'css-loader?sourceMap',
+                'postcss-loader',
+            ],
             include: [
                 path.resolve(__dirname, 'client')
             ],
@@ -211,7 +222,12 @@ module.exports = function makeWebpackConfig(options) {
             // SASS LOADER
             // Reference: https://github.com/jtangelder/sass-loader
             test: /\.(scss|sass)$/,
-            use: ['style-loader', 'css-loader?sourceMap', 'sass-loader'],
+            use: [
+                DEV ? 'style-loader' : MiniCssExtractPlugin.loader,
+                'css-loader?sourceMap',
+                'postcss-loader',
+                'sass-loader',
+            ],
             include: [
                 path.resolve(__dirname, 'node_modules/bootstrap-sass/assets/stylesheets/*.scss'),
                 path.resolve(__dirname, 'client/app/app.scss')
@@ -220,39 +236,64 @@ module.exports = function makeWebpackConfig(options) {
             // SASS LOADER
             // Reference: https://github.com/jtangelder/sass-loader
             test: /\.(scss|sass)$/,
-            use: ['to-string-loader?sourceMap', 'css-loader?sourceMap', 'sass-loader?sourceMap'],
+            use: [
+                'to-string-loader?sourceMap',
+                'css-loader?sourceMap',
+                'postcss-loader',
+                'sass-loader?sourceMap',
+            ],
             include: [
                 path.resolve(__dirname, 'client')
             ],
             exclude: [/app\.scss$/]
         }<% } else if(filters.less) { %>, {
             // LESS LOADER
             test: /\.less$/,
-            use: ['style-loader', 'css-loader?sourceMap', 'less-loader'],
+            use: [
+                DEV ? 'style-loader' : MiniCssExtractPlugin.loader,
+                'css-loader?sourceMap',
+                'postcss-loader',
+                'less-loader',
+            ],
             include: [
                 path.resolve(__dirname, 'node_modules/bootstrap/less/*.less'),
                 path.resolve(__dirname, 'client/app/app.less')
             ]
         }, {
             // LESS LOADER
             test: /\.less$/,
-            use: ['to-string-loader?sourceMap', 'css-loader?sourceMap', 'less-loader'],
+            use: [
+                'to-string-loader?sourceMap',
+                'css-loader?sourceMap',
+                'postcss-loader',
+                'less-loader',
+            ],
             include: [
                 path.resolve(__dirname, 'client')
-                ],
+            ],
             exclude: [/app\.less$/]
         }<% } else if(filters.stylus) { %>, {
             // Stylus LOADER
             test: /\.styl$/,
-            use: ['style-loader', 'css-loader?sourceMap', 'stylus-loader'],
+            use: [
+                DEV ? 'style-loader' : MiniCssExtractPlugin.loader,
+                'css-loader?sourceMap',
+                'postcss-loader',
+                'stylus-loader',
+            ],
             include: [
                 path.resolve(__dirname, 'node_modules/bootstrap-styl/bootstrap/*.styl'),
                 path.resolve(__dirname, 'client/app/app.styl')
             ]
         }, {
             // Stylus LOADER
             test: /\.styl$/,
-            use: ['to-string-loader?sourceMap', 'css-loader?sourceMap', 'stylus-loader'],
+            use: [
+                'to-string-loader?sourceMap',
+                'css-loader?sourceMap',
+                'postcss-loader',
+                'stylus-loader',
+            ],
             include: [
                 path.resolve(__dirname, 'client')
             ],
@@ -275,14 +316,6 @@ module.exports = function makeWebpackConfig(options) {
             path.resolve(__dirname, '../src')
         ),
 
-        // Reference: https://github.com/webpack/extract-text-webpack-plugin
-        // Extract css files
-        // Disabled when in test mode or not in build mode
-        new ExtractTextPlugin({
-            filename: '[name].[hash].css',
-            disable: !BUILD || TEST,
-        }),
-
         new webpack.LoaderOptionsPlugin({
             options: {
                 context: __dirname
@@ -364,6 +397,29 @@ module.exports = function makeWebpackConfig(options) {
 
     config.cache = DEV;
 
+    if(BUILD) {
+        config.optimization = {
+            splitChunks: {
+                cacheGroups: {
+                    styles: {
+                        name: 'styles',
+                        test: /\.css$/,
+                        chunks: 'all',
+                        enforce: true
+                    },
+                },
+            },
+            minimizer: [
+                new UglifyJsPlugin({
+                    cache: true,
+                    parallel: true,
+                    sourceMap: true // set to true if you want JS source maps
+                }),
+                new OptimizeCssAssetsPlugin({}),
+            ],
+        };
+    }
+
     if(TEST) {
         config.stats = {
             colors: true,