diff --git a/src/content/guides/asset-management.md b/src/content/guides/asset-management.md index 8a075fe54de3..d26fab97ecfa 100644 --- a/src/content/guides/asset-management.md +++ b/src/content/guides/asset-management.md @@ -139,7 +139,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 diff --git a/src/content/guides/production.md b/src/content/guides/production.md index ca849cd90b52..2d6aa42ae460 100644 --- 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 index 0095b34fe755..20f05c54ac98 100644 --- a/src/content/plugins/index.md +++ b/src/content/plugins/index.md @@ -31,6 +31,7 @@ Name | Description [`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 index 85737df85e5f..41e41cb4ba37 100644 --- a/src/scripts/fetch.sh +++ b/src/scripts/fetch.sh @@ -15,6 +15,7 @@ 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