diff --git a/README.md b/README.md index 6ff3559..83d6da1 100644 --- a/README.md +++ b/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), - ], - }, }; ```