Fix #142: switch to mini-css-extract-plugin

README.md

@@ -15,9 +15,9 @@
   <p>PurifyCSS for Webpack.<p>
 </div>
 
-This plugin uses [PurifyCSS](https://github.com/purifycss/purifycss) to remove unused selectors from your CSS. You **should** use it with the [extract-text-webpack-plugin](https://www.npmjs.com/package/extract-text-webpack-plugin).
+This plugin uses [PurifyCSS](https://github.com/purifycss/purifycss) to remove unused selectors from your CSS. You **should** use it with the [mini-css-extract-plugin](https://www.npmjs.com/package/mini-css-extract-plugin).
 
-Without any CSS file being emitted as an asset, this plugin will do nothing. You can also use the `file` plugin to drop a CSS file into your output folder, but it is highly recommended to use the PurifyCSS plugin with the Extract Text plugin.
+Without any CSS file being emitted as an asset, this plugin will do nothing. You can also use the `file` plugin to drop a CSS file into your output folder, but it is highly recommended to use the PurifyCSS plugin with the Mini CSS Extract plugin.
 
 > This plugin replaces earlier [purifycss-webpack-plugin](https://www.npmjs.com/package/purifycss-webpack-plugin) and it has a different API!
 
@@ -34,7 +34,7 @@ Configure as follows:
 ```javascript
 const path = require('path');
 const glob = require('glob');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const PurifyCSSPlugin = require('purifycss-webpack');
 
 module.exports = {
@@ -44,16 +44,18 @@ module.exports = {
     rules: [
       {
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract({
-          fallbackLoader: 'style-loader',
-          loader: 'css-loader'
-        })
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader'
+        ]
       }
     ]
   },
   plugins: [
-    new ExtractTextPlugin('[name].[contenthash].css'),
-    // Make sure this is after ExtractTextPlugin!
+    new MiniCssExtractPlugin({
+      filename: '[name].[contenthash].css'
+    }),
+    // Make sure this is after MiniCssExtractPlugin!
     new PurifyCSSPlugin({
       // Give paths to parse for rules. These should be absolute!
       paths: glob.sync(path.join(__dirname, 'app/*.html')),
@@ -106,18 +108,16 @@ module.exports = {
     rules: [
       {
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'css-loader',
-              options: {
-                localIdentName: 'purify_[hash:base64:5]',
-                modules: true
-              }
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              localIdentName: 'purify_[hash:base64:5]',
+              modules: true
             }
-          ]
-        })
+          }
+        ]
       }
     ]
   },

examples/package.json

@@ -5,8 +5,8 @@
   },
   "dependencies": {
     "css-loader": "^0.26.1",
-    "extract-text-webpack-plugin": "^2.0.0-beta.5",
     "glob": "^7.1.1",
+    "mini-css-extract-plugin": "^0.4.3",
     "purecss": "^0.6.2",
     "style-loader": "^0.13.1",
     "webpack": "^2.2.0-rc.3",

examples/webpack.parts.js

@@ -1,4 +1,4 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const PurifyCSSPlugin = require('../');
 
 exports.extractCSS = function extractCSS(paths) {
@@ -8,15 +8,17 @@ exports.extractCSS = function extractCSS(paths) {
         {
           test: /\.css$/,
           include: paths,
-          loader: ExtractTextPlugin.extract({
-            fallbackLoader: 'style-loader',
-            loader: 'css-loader?sourceMap'
-          })
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader?sourceMap'
+          ]
         }
       ]
     },
     plugins: [
-      new ExtractTextPlugin('[name].css?[hash]')
+      new MiniCssExtractPlugin({
+        filename: '[name].css?[hash]'
+      })
     ]
   };
 };