webpack · EugeneHlushko · Mar 28, 2018
diff --git a/antwar.config.js b/antwar.config.js
@@ -67,6 +67,9 @@ module.exports = {
           require.context('./loaders/page-loader!./src/content/plugins', false, /^\.\/.*\.md$/),
           require.context('./loaders/page-loader!./generated/plugins', false, /^\.\/.*\.md$/)
         );
+      },
+      redirects: {
+        'extract-text-webpack-plugin': '/plugins/mini-css-extract-plugin/'
       }
     },
     loaders: {

diff --git a/src/content/guides/asset-management.md b/src/content/guides/asset-management.md
@@ -7,6 +7,7 @@ contributors:
   - TheDutchCoder
   - sudarsangp
   - chenxsan
+  - EugeneHlushko
 ---
 
 If you've been following the guides from the start, you will now have a small project that shows "Hello webpack". Now let's try to incorporate some other assets, like images, to see how they can be handled.
@@ -37,16 +38,17 @@ __dist/index.html__
 
 ## Loading CSS
 
-In order to `import` a CSS file from within a JavaScript module, you need to install and add the [style-loader](/loaders/style-loader) and [css-loader](/loaders/css-loader) to your [`module` configuration](/configuration/module):
+In order to `import` a CSS file from within a JavaScript module, you need to install and add the [mini-css-extract-plugin](/plugins/mini-css-extract-plugin) and [css-loader](/loaders/css-loader) to your [`module` configuration](/configuration/module):
 
 ``` bash
-npm install --save-dev style-loader css-loader
+npm install --save-dev mini-css-extract-plugin css-loader
 ```
 
 __webpack.config.js__
 
 ``` diff
   const path = require('path');
++ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
   module.exports = {
     entry: './src/index.js',
@@ -59,16 +61,19 @@ __webpack.config.js__
 +       {
 +         test: /\.css$/,
 +         use: [
-+           'style-loader',
++           MiniCssExtractPlugin.loader,
 +           'css-loader'
 +         ]
 +       }
 +     ]
-+   }
-  };
++   },
++   plugins: [
++    new MiniCssExtractPlugin()
++  ],
++ };
 ```
 
-T> webpack uses a regular expression to determine which files it should look for and serve to a specific loader. In this case any file that ends with `.css` will be served to the `style-loader` and the `css-loader`.
+T> webpack uses a regular expression to determine which files it should look for and serve to a specific loader. In this case any file that ends with `.css` will be served to the `mini-css-extract-plugin` and the `css-loader`.
 
 This enables you to `import './style.css'` into the file that depends on that styling. Now, when that module is run, a `<style>` tag with the stringified css will be inserted into the `<head>` of your html file.
 
@@ -139,7 +144,7 @@ bundle.js  560 kB       0  [emitted]  [big]  main
 
 Open up `index.html` in your browser again and you should see that `Hello webpack` is now styled in red. To see what webpack did, inspect the page (don't view the page source, as it won't show you the result) and look at the page's head tags. It should contain our style block that we imported in `index.js`.
 
-Note that you can, and in most cases should, [split your CSS](/plugins/extract-text-webpack-plugin) for better load times in production. On top of that, loaders exist for pretty much any flavor of CSS you can think of -- [postcss](/loaders/postcss-loader), [sass](/loaders/sass-loader), and [less](/loaders/less-loader) to name a few.
+Note that you can, and in most cases should, [minimize css](/plugins/mini-css-extract-plugin/#minimizing-for-production) for better load times in production. On top of that, loaders exist for pretty much any flavor of CSS you can think of -- [postcss](/loaders/postcss-loader), [sass](/loaders/sass-loader), and [less](/loaders/less-loader) to name a few.
 
 
 ## Loading Images
@@ -154,6 +159,7 @@ __webpack.config.js__
 
 ``` diff
   const path = require('path');
+  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
   module.exports = {
     entry: './src/index.js',
@@ -166,7 +172,7 @@ __webpack.config.js__
         {
           test: /\.css$/,
           use: [
-            'style-loader',
+            MiniCssExtractPlugin.loader,
             'css-loader'
           ]
         },
@@ -177,7 +183,10 @@ __webpack.config.js__
 +         ]
 +       }
       ]
-    }
+    },
+    plugins: [
+      new MiniCssExtractPlugin();
+    ]
   };
 ```
 
@@ -272,6 +281,7 @@ __webpack.config.js__
 
 ``` diff
   const path = require('path');
+  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
   module.exports = {
     entry: './src/index.js',
@@ -284,7 +294,7 @@ __webpack.config.js__
         {
           test: /\.css$/,
           use: [
-            'style-loader',
+            MiniCssExtractPlugin.loader,
             'css-loader'
           ]
         },
@@ -301,7 +311,10 @@ __webpack.config.js__
 +         ]
 +       }
       ]
-    }
+    },
+    plugins: [
+      new MiniCssExtractPlugin();
+    ]
   };
 ```
 
@@ -386,6 +399,7 @@ __webpack.config.js__
 
 ``` diff
   const path = require('path');
+  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
   module.exports = {
     entry: './src/index.js',
@@ -398,7 +412,7 @@ __webpack.config.js__
         {
           test: /\.css$/,
           use: [
-            'style-loader',
+            MiniCssExtractPlugin.loader,
             'css-loader'
           ]
         },
@@ -427,7 +441,10 @@ __webpack.config.js__
 +         ]
 +       }
       ]
-    }
+    },
+    plugins: [
+      new MiniCssExtractPlugin();
+    ]
   };
 ```
 
@@ -546,6 +563,7 @@ __webpack.config.js__
 
 ``` diff
   const path = require('path');
+- const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
   module.exports = {
     entry: './src/index.js',
@@ -558,7 +576,7 @@ __webpack.config.js__
 -       {
 -         test: /\.css$/,
 -         use: [
--           'style-loader',
+-           MiniCssExtractPlugin.loader,
 -           'css-loader'
 -         ]
 -       },
@@ -588,6 +606,9 @@ __webpack.config.js__
 -       }
 -     ]
 -   }
+-   plugins: [
+-     new MiniCssExtractPlugin();
+-   ]
   };
 ```
 

diff --git a/src/content/guides/production.md b/src/content/guides/production.md
@@ -237,9 +237,9 @@ __src/index.js__
 ```
 
 
-## Split CSS
+## Minimize CSS
 
-As mentioned in __Asset Management__ at the end of the [Loading CSS](/guides/asset-management#loading-css) section, it is typically best practice to split your CSS out to a separate file using the `ExtractTextPlugin`. There are some good examples of how to do this in the plugin's [documentation](/plugins/extract-text-webpack-plugin). The `disable` option can be used in combination with the `--env` flag to allow inline loading in development, which is recommended for Hot Module Replacement and build speed.
+It is crucial to minimize your CSS on production, please see [Minimizing for Production](/plugins/mini-css-extract-plugin/#minimizing-for-production) section.
 
 
 ## CLI Alternatives

diff --git a/src/content/plugins/index.md b/src/content/plugins/index.md
@@ -23,14 +23,14 @@ Name                                                     | Description
 [`DefinePlugin`](/plugins/define-plugin)           | Allow global constants configured at compile time
 [`DllPlugin`](/plugins/dll-plugin)                 | Split bundles in order to drastically improve build time
 [`EnvironmentPlugin`](/plugins/environment-plugin) | Shorthand for using the [`DefinePlugin`](./define-plugin) on `process.env` keys
-[`ExtractTextWebpackPlugin`](/plugins/extract-text-webpack-plugin) | Extract text (CSS) from your bundles into a separate file
 [`HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin) | Enable Hot Module Replacement (HMR)
 [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin)          | Easily create HTML files to serve your bundles
 [`I18nWebpackPlugin`](/plugins/i18n-webpack-plugin)          | Add i18n support to your bundles
 [`IgnorePlugin`](/plugins/ignore-plugin)                     | Exclude certain modules from bundles
 [`LimitChunkCountPlugin`](/plugins/limit-chunk-count-plugin) | Set min/max limits for chunking to better control chunking
 [`LoaderOptionsPlugin`](/plugins/loader-options-plugin)      | Used for migrating from webpack 1 to 2
 [`MinChunkSizePlugin`](/plugins/min-chunk-size-plugin)       | Keep chunk size above the specified limit
+[`MiniCssExtractPlugin`](/plugins/mini-css-extract-plugin)       | creates a CSS file per JS file which requires CSS
 [`NoEmitOnErrorsPlugin`](/plugins/no-emit-on-errors-plugin)  | Skip the emitting phase when there are compilation errors
 [`NormalModuleReplacementPlugin`](/plugins/normal-module-replacement-plugin) | Replace resource(s) that matches a regexp
 [`NpmInstallWebpackPlugin`](/plugins/npm-install-webpack-plugin) | Auto-install missing dependencies during development

diff --git a/src/scripts/fetch.sh b/src/scripts/fetch.sh
@@ -15,9 +15,11 @@ node ./src/scripts/fetch_package_names.js "peerigon" "extract-loader" | node ./s
 
 # Fetch webpack-contrib (and various other) plugin repositories
 node ./src/scripts/fetch_package_names.js "webpack-contrib" "-webpack-plugin" | node ./src/scripts/fetch_package_files.js "README.md" "./generated/plugins"
+node ./src/scripts/fetch_package_names.js "webpack-contrib" "-extract-plugin" | node ./src/scripts/fetch_package_files.js "README.md" "./generated/plugins"
 
 # Remove deprecated or archived plugins repositories
 rm ./generated/plugins/component-webpack-plugin.json ./generated/plugins/component-webpack-plugin.md
+rm ./generated/plugins/extract-text-webpack-plugin.json ./generated/plugins/extract-text-webpack-plugin.md
 
 # Fetch sponsors and backers from opencollective
 node ./src/scripts/fetch_supporters.js