diff --git a/README.md b/README.md index 3d9cf859..70e28072 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,6 @@

mini-css-extract-plugin

-

desc

This plugin extract CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps. @@ -39,6 +38,8 @@ npm install --save-dev mini-css-extract-plugin ### Configuration +#### Minimal example + **webpack.config.js** ```js @@ -66,6 +67,46 @@ module.exports = { } ``` +#### Advanced configuration example + +This plugin should be used only on `production` builds without `style-loader` in the loaders chain, especially if you want to have HMR in `development`. + +Here is an example to have both HMR in `development` and your styles extracted in a file for `production` builds. + +(Loaders options left out for clarity, adapt accordingly to your needs.) + + +**webpack.config.js** + +```js +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const devMode = process.env.NODE_ENV !== 'production' + +module.exports = { + plugins: [ + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: devMode ? '[name].css' : '[name].[hash].css', + chunkFilename: devMode ? '[id].css' : '[id].[hash].css', + }) + ], + module: { + rules: [ + { + test: /\.s?[ac]ss$/, + use: [ + devMode ? 'style-loader' : MiniCssExtractPlugin.loader, + 'css-loader', + 'postcss-loader', + 'sass-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: