From 89e95b3f143682ed9a006991bacf45c9dcba4818 Mon Sep 17 00:00:00 2001 From: ruki Date: Thu, 8 Nov 2018 00:43:05 +0800 Subject: remove node_modules --- node_modules/mini-css-extract-plugin/README.md | 320 ------------------------- 1 file changed, 320 deletions(-) delete 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 deleted file mode 100644 index f072fc05..00000000 --- a/node_modules/mini-css-extract-plugin/README.md +++ /dev/null @@ -1,320 +0,0 @@ -
- - - - - -

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 `