Replace extract-text-webpack-plugin with mini-css-extract-plugin

According to the TL;DR of the comment below, mini-css-extract-plugin is
replacing extract-text-webpack-plugin which will be deprecated. Since
this does not have a built in optimizer for CSS, a separate plugin is
used. However overriding the optimizer means that UglifyJS must be
included manually (previously this was a transitive dependency of
webpack which was used automatically in production mode)

webpack-contrib/extract-text-webpack-plugin#749 (comment)

This closes phoenixframework#2818

Author: Gazler

installer/templates/phx_assets/webpack/package.json

@@ -15,9 +15,12 @@
     "babel-preset-env": "^1.6.1",
     "copy-webpack-plugin": "^4.5.0",
     "css-loader": "^0.28.10",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.0",
     "style-loader": "^0.20.2",
-    "webpack": "4.0.0",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "webpack": "4.4.0",
+
     "webpack-cli": "^2.0.10"
   }
 }

installer/templates/phx_assets/webpack/webpack.config.js

@@ -1,8 +1,16 @@
 const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = (env, options) => ({
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
+      new OptimizeCSSAssetsPlugin({})
+    ]
+  },
   entry: './js/app.js',
   output: {
     filename: 'app.js',
@@ -19,17 +27,12 @@ module.exports = (env, options) => ({
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: {
-            loader: 'css-loader', options: { minimize: options.mode === 'production' }
-          }
-        })
+        use: [MiniCssExtractPlugin.loader, 'css-loader']
       }
     ]
   },
   plugins: [
-    new ExtractTextPlugin('../css/app.css'),
+    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
     new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
   ]
 });