diff --git a/README.md b/README.md index 0921706..4f9b051 100644 --- a/README.md +++ b/README.md @@ -15,9 +15,9 @@

PurifyCSS for Webpack.

-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 } - ] - }) + } + ] } ] }, diff --git a/examples/package.json b/examples/package.json index 5469eec..1dbebb1 100644 --- a/examples/package.json +++ b/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", diff --git a/examples/webpack.parts.js b/examples/webpack.parts.js index 4933b1f..54c47b1 100644 --- a/examples/webpack.parts.js +++ b/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]' + }) ] }; };