Update readme to use MiniCssExtractPlugin

README.md

@@ -1,34 +1,72 @@
 # Apply postcss plugins to webpack css asset
-This webpack plugin gets css, extracted by [ExtractTextPlugin](https://github.com/webpack/extract-text-webpack-plugin) and apply postcss plugins to it.
+This webpack plugin gets css extracted by [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin) and applies postcss plugins to it.
 
 ### Why?
-If you use postcss-loader, not all its plugins are effective in file-by-file processing. For instance, css structural optimizations or media query packaging better apply to one css production file, that can be generated by ExtractTextPlugin.
+If you use postcss-loader, not all its plugins are effective in file-by-file processing. For instance, css structural optimizations or media query packaging better apply to one css production file that can be generated by MiniCssExtractPlugin.
 
 # Installation
 `npm i postcss-assets-webpack-plugin`
 
 # Options
-* `test` - regular expression for matching files that returned from ExtractTextPlugin.
+* `test` - regular expression for matching files returned from MiniCssExtractPlugin.
 * `plugins` - array of postcss plugins
 * `log` - boolean if plugin can print info to the console, `true` by default
 
 # Usage
 Simple example of webpack config that tranforms css-modules with less and postcss. Autoprefixer is used in development _and_ production, mqpacker and csswring are used only for production build.
 
-```
+```javascript
 import webpack from 'webpack';
 import csswring from 'csswring';
 import mqpacker from 'mqpacker';
 import autoprefixer from 'autoprefixer';
-import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import PostCSSAssetsPlugin from 'postcss-assets-webpack-plugin';
 
-const lessLoader = 'css?modules&importLoaders=1&localIdentName=[hash:10]!postcss!less';
+const devMode = process.env.NODE_ENV !== 'production'
 
 webpackConfig = {
   <...>
+  postcss() {
+    return [autoprefixer({browser: 'last 2 version', cascade: false})]
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.less$/,
+        exclude: [/node_modules/],
+        use: [
+          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              sourceMap: true,
+              importLoaders: 1,
+              minimize: false, // We use PostcssAssetsPlugin instead to minimize result chunks as a whole
+              localIdentName: '[name]_[local]_[sha512:hash:base64:3]',
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'less-loader',
+          },
+        ],
+      }
+    ],
+  },
+
   plugins: [
-    new ExtractTextPlugin('[name].css'),
+    new MiniCssExtractPlugin({
+      filename: devMode ? '[name].css' : '[name].[hash].css',
+      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
+    })
 
     new PostCSSAssetsPlugin({
       test: /\.css$/,
@@ -41,16 +79,5 @@ webpackConfig = {
       ],
     }),
   ],
-  
-  postcss() {
-    return [autoprefixer({browser: 'last 2 version', cascade: false})]
-  },
-  
-  module: {
-    loaders: [
-      test: /\.less$/,
-      loader: process.env.NODE_ENV === 'development' ? 'style' + lessLoader : ExtractTextPlugin.extract(lessLoader),
-    ],
-  },
 };
 ```