Skip to content

docs(plugins) Add mini-css-extract-plugin #2028

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 16, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/guides/asset-management.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/content/guides/production.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/content/plugins/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/scripts/fetch.sh
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down