From daf385ce9b562798fb060d8791e3d992dd14e6d4 Mon Sep 17 00:00:00 2001 From: Evilebot Tnawi Date: Fri, 20 Dec 2019 19:06:32 +0300 Subject: [PATCH] docs: improve readme (#476) --- README.md | 248 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 214 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 7dc44d78..159e11e8 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@
- @@ -8,10 +7,14 @@
[![npm][npm]][npm-url] +[![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![coverage][cover]][cover-url] [![chat][chat]][chat-url] +[![size][size]][size-url] + +# mini-css-extract-plugin This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps. @@ -24,24 +27,132 @@ Compared to the extract-text-webpack-plugin: - Easier to use - Specific to CSS -

Install

+## Getting Started + +To begin, you'll need to install `mini-css-extract-plugin`: ```bash npm install --save-dev mini-css-extract-plugin ``` -

Usage

+It's recommended to combine `mini-css-extract-plugin` with the [`css-loader`](https://github.com/webpack-contrib/css-loader) + +Then add the loader and the plugin to your `webpack` config. For example: + +**style.css** + +```css +body { + background: green; +} +``` + +**component.js** + +```js +import './style.css'; +``` + +**webpack.config.js** + +```js +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + plugins: [new MiniCssExtractPlugin()], + module: { + rules: [ + { + test: /\.css$/i, + use: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], + }, +}; +``` -### Configuration +## Options -#### `publicPath` +### `publicPath` Type: `String|Function` Default: the `publicPath` in `webpackOptions.output` Specifies a custom public path for the target file(s). -#### `esModule` +#### `String` + +**webpack.config.js** + +```js +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + plugins: [ + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: '[name].css', + chunkFilename: '[id].css', + }), + ], + module: { + rules: [ + { + test: /\.css$/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + publicPath: '/public/path/to/', + }, + }, + 'css-loader', + ], + }, + ], + }, +}; +``` + +#### `Function` + +**webpack.config.js** + +```js +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + +module.exports = { + plugins: [ + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: '[name].css', + chunkFilename: '[id].css', + }), + ], + module: { + rules: [ + { + test: /\.css$/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + publicPath: (resourcePath, context) => { + return path.relative(path.dirname(resourcePath), context) + '/'; + }, + }, + }, + 'css-loader', + ], + }, + ], + }, +}; +``` + +### `esModule` Type: `Boolean` Default: `false` @@ -77,7 +188,9 @@ module.exports = { }; ``` -#### Minimal example +## Examples + +### Minimal example **webpack.config.js** @@ -116,12 +229,13 @@ module.exports = { }; ``` -#### `publicPath` function example +### The `publicPath` option as function **webpack.config.js** ```js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + module.exports = { plugins: [ new MiniCssExtractPlugin({ @@ -155,7 +269,7 @@ module.exports = { }; ``` -#### Advanced configuration example +### 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`. @@ -199,16 +313,21 @@ module.exports = { }; ``` -#### Hot Module Reloading (HMR) +### Hot Module Reloading (HMR) -extract-mini-css-plugin supports hot reloading of actual css files in development. Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules. Below is an example configuration of mini-css for HMR use with CSS modules. +The `mini-css-extract-plugin` supports hot reloading of actual css files in development. +Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules. +Below is an example configuration of mini-css for HMR use with CSS modules. -While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names. `reloadAll` is an option that should only be enabled if HMR isn't working correctly. The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename. +While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names. +`reloadAll` is an option that should only be enabled if HMR isn't working correctly. +The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename. **webpack.config.js** ```js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); + module.exports = { plugins: [ new MiniCssExtractPlugin({ @@ -242,7 +361,8 @@ module.exports = { ### Minimizing For Production -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: +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: **webpack.config.js** @@ -250,6 +370,7 @@ To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](htt const TerserJSPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); + module.exports = { optimization: { minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], @@ -271,9 +392,7 @@ module.exports = { }; ``` -### Features - -#### Using preloaded or inlined CSS +### Using preloaded or inlined CSS The runtime code detects already added CSS via `` or `