## Enable HMR for CSS

Current webpack settings uses `mini-css-extract-plugin` for both development 
and production. This plugin extract css into many small files based on the 
modules that imports them. 

However, per the package's README, it is recommended for production only 
especially if we want Hot Module Replacement (HMR) for CSS. To use HMR, we need 
to use `style-loader` when in development mode. Otherwise, the page will not 
update after saving CSS files.

https://github.com/webpack-contrib/mini-css-extract-plugin#advanced-configuration-example

To ensure that `style-loader` works correctly, I also need to modify the html 
templates to import `theme` js entry points. Because `style-loader` injects css 
code via js that writes `<style>` tags instead of exporting css files. 

## Optimize CSS output

Current CSS output from webpack are not minified. This PR adds 
`optimize-css-assets-webpack-plugin` to minify CSS outputs. The minified 
results reduce CSS size by ~100kb

![pasted_image_9_4_18__11_33_am](https://user-images.githubusercontent.com/1659771/45051003-9daf4780-b037-11e8-9434-2b7816503979.png)

## Testing

I have tested building in production and running dev server. Both are working 
fine. 

@graceguo-supercat @xtinec @hughhhh 

[ Full content available at: 
https://github.com/apache/incubator-superset/pull/5813 ]
This message was relayed via gitbox.apache.org for [email protected]

Reply via email to