Enable CSS Hot Module Replacement and optimize css output for product…

…ion (apache#5813)

* Enable HMR for css. Use style-loader for development

* optimize css output

* remove mini-css-extract when dev

* change double-quote to single-quote

superset/assets/package.json

@@ -159,6 +159,7 @@
     "minimist": "^1.2.0",
     "mocha": "^3.5.3",
     "npm-check-updates": "^2.14.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "po2json": "^0.4.5",
     "prettier": "^1.12.1",
     "react-addons-test-utils": "^15.6.2",

superset/assets/webpack.config.js

@@ -2,7 +2,9 @@ const path = require('path');
 const webpack = require('webpack');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const WebpackAssetsManifest = require('webpack-assets-manifest');
+
 // Parse command-line arguments
 const parsedArgs = require('minimist')(process.argv.slice(2));
 
@@ -38,17 +40,13 @@ const plugins = [
 if (isDevMode) {
   // Enable hot module replacement
   plugins.push(new webpack.HotModuleReplacementPlugin());
-  // text loading (webpack 4+)
-  plugins.push(new MiniCssExtractPlugin({
-    filename: '[name].[hash:8].entry.css',
-    chunkFilename: '[name].[hash:8].chunk.css',
-  }));
 } else {
   // text loading (webpack 4+)
   plugins.push(new MiniCssExtractPlugin({
     filename: '[name].[chunkhash].entry.css',
     chunkFilename: '[name].[chunkhash].chunk.css',
   }));
+  plugins.push(new OptimizeCSSAssetsPlugin());
 }
 
 const output = {
@@ -106,15 +104,15 @@ const config = {
         test: /\.css$/,
         include: APP_DIR,
         use: [
-          MiniCssExtractPlugin.loader,
+          isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
         ],
       },
       {
         test: /\.less$/,
         include: APP_DIR,
         use: [
-          MiniCssExtractPlugin.loader,
+          isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
           'less-loader',
         ],