webpack: optimize css for production

html/package.json

@@ -10,9 +10,8 @@
     "author": "Shuanglei Tao <tsl0922@gmail.com>",
     "license": "MIT",
     "scripts": {
-        "build": "webpack --config webpack.prod.js && gulp",
-        "clean": "gulp clean",
-        "start": "webpack-serve webpack.dev.js"
+        "build": "NODE_ENV=production webpack --config webpack.prod.js && gulp",
+        "start": "gulp clean && webpack-serve webpack.dev.js"
     },
     "dependencies": {
         "bulma": "^0.6.1",
@@ -36,8 +35,10 @@
         "koa-connect": "^2.0.1",
         "mini-css-extract-plugin": "^0.4.0",
         "node-sass": "^4.7.2",
+        "optimize-css-assets-webpack-plugin": "^4.0.1",
         "sass-loader": "^6.0.6",
         "style-loader": "^0.19.1",
+        "uglifyjs-webpack-plugin": "^1.2.5",
         "webpack": "^4.6.0",
         "webpack-cli": "^2.1.2",
         "webpack-merge": "^4.1.2",

html/webpack.config.js

@@ -42,4 +42,5 @@ module.exports = {
     performance : {
         hints : false
     },
+    devtool: devMode ? 'cheap-module-eval-source-map' : 'source-map',
 }

html/webpack.dev.js

@@ -6,7 +6,6 @@ const config = require('./webpack.config.js');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = merge(config, {
-    devtool: 'source-map',
     mode: 'development',
     plugins: [
         new HtmlWebpackPlugin({

html/webpack.prod.js

@@ -3,9 +3,20 @@ const config = require('./webpack.config.js');
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 
 module.exports = merge(config, {
     mode: 'production',
+    optimization: {
+        minimizer: [
+            new UglifyJsPlugin({
+                cache: true,
+                parallel: true,
+            }),
+            new OptimizeCSSAssetsPlugin({}),
+        ]
+    },
     plugins: [
         new HtmlWebpackPlugin({
             inlineSource: '.(js|css)$',

html/yarn.lock

@@ -1906,7 +1906,7 @@ cssesc@^0.1.0:
   version "0.1.0"
   resolved "http://registry.npm.taobao.org/cssesc/download/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
 
-cssnano@^3.10.0:
+cssnano@^3.10.0, cssnano@^3.4.0:
   version "3.10.0"
   resolved "http://registry.npm.taobao.org/cssnano/download/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
   dependencies:
@@ -4212,6 +4212,13 @@ koa@^2.4.1:
     type-is "^1.5.5"
     vary "^1.0.0"
 
+last-call-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "http://registry.npm.taobao.org/last-call-webpack-plugin/download/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
+  dependencies:
+    lodash "^4.17.5"
+    webpack-sources "^1.1.0"
+
 latest-version@^3.0.0:
   version "3.1.0"
   resolved "http://registry.npm.taobao.org/latest-version/download/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
@@ -5298,6 +5305,13 @@ opn@^5.1.0:
   dependencies:
     is-wsl "^1.1.0"
 
+optimize-css-assets-webpack-plugin@^4.0.1:
+  version "4.0.1"
+  resolved "http://registry.npm.taobao.org/optimize-css-assets-webpack-plugin/download/optimize-css-assets-webpack-plugin-4.0.1.tgz#48f016766752c7648b92cc1e795b999732bd87a2"
+  dependencies:
+    cssnano "^3.4.0"
+    last-call-webpack-plugin "^3.0.0"
+
 ora@^0.2.3:
   version "0.2.3"
   resolved "http://registry.npm.taobao.org/ora/download/ora-0.2.3.tgz#37527d220adcd53c39b73571d754156d5db657a4"
@@ -7217,7 +7231,7 @@ uglify-js@3.3.x:
     commander "~2.13.0"
     source-map "~0.6.1"
 
-uglifyjs-webpack-plugin@^1.2.4:
+uglifyjs-webpack-plugin@^1.2.4, uglifyjs-webpack-plugin@^1.2.5:
   version "1.2.5"
   resolved "http://registry.npm.taobao.org/uglifyjs-webpack-plugin/download/uglifyjs-webpack-plugin-1.2.5.tgz#2ef8387c8f1a903ec5e44fa36f9f3cbdcea67641"
   dependencies: