Skip to content
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
6 changes: 4 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ out
*.generated.*
/.cache
/pages/docs/api
/pages/docs/loaders
/pages/docs/plugins
/pages/docs/loaders/*
!/pages/docs/loaders/index.md
/pages/docs/plugins/*
!/pages/docs/plugins/index.md
/generated
/pages/about/governance
6 changes: 4 additions & 2 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ out
*.generated.*
/.cache
/pages/docs/api
/pages/docs/loaders
/pages/docs/plugins
/pages/docs/loaders/*
!/pages/docs/loaders/index.md
/pages/docs/plugins/*
!/pages/docs/plugins/index.md
versions.json
/generated
28 changes: 28 additions & 0 deletions pages/docs/loaders/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
authors: ryzrr
---

# Loaders

Out of the box, webpack only understands JavaScript and JSON. Loaders let it
handle other file types by transforming their contents into modules that webpack
can add to the dependency graph. See
[Concepts: Loaders](/guides/getting-started/concepts/loaders) for how they fit
into a build.

The loaders below are maintained by the webpack organization.

| Loader | Description |
| ------------------------------------------------ | ---------------------------------------------------------------------------------- |
| [`css-loader`](/docs/loaders/css-loader) | Resolve `@import` and `url()` in CSS the way `import` and `require()` are resolved |
| [`style-loader`](/docs/loaders/style-loader) | Inject CSS into the DOM |
| [`sass-loader`](/docs/loaders/sass-loader) | Compile Sass and SCSS to CSS |
| [`less-loader`](/docs/loaders/less-loader) | Compile Less to CSS |
| [`stylus-loader`](/docs/loaders/stylus-loader) | Compile Stylus to CSS |
| [`postcss-loader`](/docs/loaders/postcss-loader) | Process CSS with PostCSS |
| [`html-loader`](/docs/loaders/html-loader) | Export HTML as a string and resolve its asset references |
| [`coffee-loader`](/docs/loaders/coffee-loader) | Compile CoffeeScript to JavaScript |
| [`exports-loader`](/docs/loaders/exports-loader) | Add exports to a module that does not define its own |
| [`imports-loader`](/docs/loaders/imports-loader) | Provide global variables to a module that expects them |
| [`expose-loader`](/docs/loaders/expose-loader) | Expose a module on the global object |
| [`thread-loader`](/docs/loaders/thread-loader) | Run the loaders that follow it in a worker pool |
23 changes: 23 additions & 0 deletions pages/docs/plugins/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
authors: ryzrr
---

# Plugins

Plugins hook into webpack's build lifecycle to do work that loaders cannot, such
as optimizing output and managing assets. See
[Concepts: Plugins](/guides/getting-started/concepts/plugins) for how they fit
into a build.

Plugins built into webpack are documented in the [API reference](/docs/api/v5.x).
The plugins below are separate packages maintained by the webpack organization.

Comment on lines +12 to +14
| Plugin | Description |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| [`mini-css-extract-plugin`](/docs/plugins/mini-css-extract-plugin) | Extract CSS into separate files, one per JS file that imports CSS |
| [`copy-webpack-plugin`](/docs/plugins/copy-webpack-plugin) | Copy individual files or whole directories into the build output |
| [`compression-webpack-plugin`](/docs/plugins/compression-webpack-plugin) | Emit compressed versions of assets to serve with `Content-Encoding` |
| [`image-minimizer-webpack-plugin`](/docs/plugins/image-minimizer-webpack-plugin) | Compress images during the build |
| [`eslint-webpack-plugin`](/docs/plugins/eslint-webpack-plugin) | Run ESLint on your modules during the build |
| [`stylelint-webpack-plugin`](/docs/plugins/stylelint-webpack-plugin) | Run Stylelint on your styles during the build |
| [`minimizer-webpack-plugin`](/docs/plugins/minimizer-webpack-plugin) | Minify assets, with support for several minifiers |
Loading