From 26105034da4fcce7ac883c899d781f016559310d Mon Sep 17 00:00:00 2001 From: ruki Date: Thu, 8 Nov 2018 00:38:48 +0800 Subject: switch to vuepress --- node_modules/mini-css-extract-plugin/README.md | 320 +++++++++++++++++++++++++ 1 file changed, 320 insertions(+) create mode 100644 node_modules/mini-css-extract-plugin/README.md (limited to 'node_modules/mini-css-extract-plugin/README.md') diff --git a/node_modules/mini-css-extract-plugin/README.md b/node_modules/mini-css-extract-plugin/README.md new file mode 100644 index 00000000..f072fc05 --- /dev/null +++ b/node_modules/mini-css-extract-plugin/README.md @@ -0,0 +1,320 @@ +
+ + + + + +

mini-css-extract-plugin

+
+ +[![npm][npm]][npm-url] +[![deps][deps]][deps-url] +[![tests][tests]][tests-url] +[![coverage][cover]][cover-url] +[![chat][chat]][chat-url] + +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. + +It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work. + +Compared to the extract-text-webpack-plugin: + +* Async loading +* No duplicate compilation (performance) +* Easier to use +* Specific to CSS + +TODO: + +* HMR support + +

Install

+ +```bash +npm install --save-dev mini-css-extract-plugin +``` + +

Usage

+ +### Configuration + +#### Minimal example + +**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: { + // you can specify a publicPath here + // by default it use publicPath in webpackOptions.output + publicPath: '../' + } + }, + "css-loader" + ] + } + ] + } +} +``` + +#### 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: /\.(sa|sc|c)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: + +**webpack.config.js** + +```js +const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); +module.exports = { + optimization: { + minimizer: [ + new UglifyJsPlugin({ + cache: true, + parallel: true, + sourceMap: true // set to true if you want JS source maps + }), + new OptimizeCSSAssetsPlugin({}) + ] + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: "[name].css", + chunkFilename: "[id].css" + }) + ], + module: { + rules: [ + { + test: /\.css$/, + use: [ + MiniCssExtractPlugin.loader, + "css-loader" + ] + } + ] + } +} +``` + +### Features + +#### Using preloaded or inlined CSS + +The runtime code detects already added CSS via `` or `