feat: adding hot module reloading (#334)

.gitignore

@@ -14,3 +14,4 @@ Thumbs.db
 .vscode
 *.sublime-project
 *.sublime-workspace
+.idea

README.md

@@ -24,9 +24,6 @@ Compared to the extract-text-webpack-plugin:
 * Easier to use
 * Specific to CSS
 
-TODO:
-
-* HMR support
 
 <h2 align="center">Install</h2>
 
@@ -69,8 +66,9 @@ module.exports = {
             loader: MiniCssExtractPlugin.loader,
             options: {
               // you can specify a publicPath here
-              // by default it use publicPath in webpackOptions.output
-              publicPath: '../'
+              // by default it uses publicPath in webpackOptions.output
+              publicPath: '../',
+              hmr: process.env.NODE_ENV === 'development'
             }
           },
           "css-loader"
@@ -149,7 +147,12 @@ module.exports = {
       {
         test: /\.(sa|sc|c)ss$/,
         use: [
-          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
+           {
+             loader: MiniCssExtractPlugin.loader,
+             options: {
+               hmr: process.env.NODE_ENV === 'development'
+             }
+           },
           'css-loader',
           'postcss-loader',
           'sass-loader',
@@ -160,6 +163,51 @@ module.exports = {
 }
 ```
 
+#### Hot Module Reloading (HMR)
+
+extract-mini-css-plugin supports hot reloading of actual css files in development. Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules. Below is an example configuration of mini-css for HMR use with CSS modules.
+
+
+While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names. `reloadAll` is an option that should only be enabled if HMR isn't working correctly. The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename. 
+
+
+
+**webpack.config.js**
+
+```js
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+module.exports = {
+  plugins: [
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: "[name].css",
+      chunkFilename: "[id].css"
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              // only enable hot in development
+              hmr: process.env.NODE_ENV === 'development',
+              // if hmr does not work, this is a forceful method.
+              reloadAll: true
+            }
+          },
+          "css-loader"
+        ]
+      }
+    ]
+  }
+}
+```
+
+
 ### Minimizing For Production
 
 While webpack 5 is likely to come with a CSS minimizer built-in, with webpack 4 you need to bring your own. To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). Setting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:
@@ -314,6 +362,10 @@ module.exports = {
 
 For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.
 
+### Remove Order Warnings
+
+If the terminal is getting bloated with chunk order warnings. You can filter by configuring [warningsFilter](https://webpack.js.org/configuration/stats/) withing the webpack stats option
+
 ### Media Query Plugin
 
 If you'd like to extract the media queries from the extracted CSS (so mobile users don't need to load desktop or tablet specific CSS anymore) you should use one of the following plugins: