Skip to content

feat(docs): add loaders and plugins index pages #153

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.

Sign up for GitHub

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

Open
ryzrr wants to merge 1 commit into
base: main
Choose a base branch
from
+105 −4
Open

feat(docs): add loaders and plugins index pages #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
View file
Open in desktop
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
View file
Open in desktop
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
60 changes: 60 additions & 0 deletions pages/docs/loaders/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
authors: simon04,bajras,rhys-vdw,EugeneHlushko,hemal7735,snitin315,anshumanv,jamesgeorge007,chenxsan
source: https://github.com/webpack/webpack-doc-kit/blob/main/pages/docs/loaders/index.md
---

# Loaders

Webpack enables use of [loaders](#TODO[/concepts/loaders]) to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.
Loaders are separate packages that extend webpack's capabilities and are maintained within the broader ecosystem.
Loaders are activated by using `loadername!` prefixes in `import .. from "mod";`/`require()` statements, or are automatically applied via regex from your webpack configuration – see [configuration](#TODO[/concepts/loaders/#configuration]).

## Files

- [`ref-loader`](https://www.npmjs.com/package/ref-loader) Create dependencies between any files manually

## JSON

- [`cson-loader`](https://github.com/awnist/cson-loader) Loads and transpiles a [CSON](https://github.com/bevry/cson#what-is-cson) file

## Transpiling

- [`babel-loader`](https://github.com/babel/babel-loader) Loads ES2015+ code and transpiles to ES5 using [Babel](https://babeljs.io/)
- [`esbuild-loader`](https://github.com/privatenumber/esbuild-loader) Loads ES2015+ code and transpiles to ES6+ using [esbuild](https://esbuild.github.io/)
- [`buble-loader`](https://github.com/sairion/buble-loader) Loads ES2015+ code and transpiles to ES5 using [Bublé](https://buble.surge.sh/guide/)
- [`traceur-loader`](https://github.com/jupl/traceur-loader) Loads ES2015+ code and transpiles to ES5 using [Traceur](https://github.com/google/traceur-compiler#readme)
- [`ts-loader`](https://github.com/TypeStrong/ts-loader) Loads [TypeScript](https://www.typescriptlang.org/) 2.0+ like JavaScript
- [`coffee-loader`](/docs/loaders/coffee-loader) Loads [CoffeeScript](http://coffeescript.org/) like JavaScript
- [`fengari-loader`](https://github.com/fengari-lua/fengari-loader/) Loads Lua code using [fengari](https://fengari.io/)
- [`elm-webpack-loader`](https://github.com/elm-community/elm-webpack-loader) Loads [Elm](https://elm-lang.org/) like JavaScript

## Templating

- [`html-loader`](/docs/loaders/html-loader) Exports HTML as string, require references to static resources
- [`pug-loader`](https://github.com/pugjs/pug-loader) Loads Pug and Jade templates and returns a function
- [`markdown-loader`](https://github.com/peerigon/markdown-loader) Compiles Markdown to HTML
- [`react-markdown-loader`](https://github.com/javiercf/react-markdown-loader) Compiles Markdown to a React Component using the markdown-parse parser
- [`posthtml-loader`](https://github.com/posthtml/posthtml-loader) Loads and transforms a HTML file using [PostHTML](https://github.com/posthtml/posthtml)
- [`handlebars-loader`](https://github.com/pcardune/handlebars-loader) Compiles Handlebars to HTML
- [`markup-inline-loader`](https://github.com/asnowwolf/markup-inline-loader) Inline SVG/MathML files to HTML. It's useful when applying icon font or applying CSS animation to SVG.
- [`twig-loader`](https://github.com/zimmo-be/twig-loader) Compiles Twig templates and returns a function
- [`remark-loader`](https://github.com/webpack/remark-loader) Load markdown through `remark` with built-in image resolution

## Styling

- [`style-loader`](/docs/loaders/style-loader) Add exports of a module as style to DOM
- [`css-loader`](/docs/loaders/css-loader) Loads CSS file with resolved imports and returns CSS code
- [`css-utility-loader`](https://github.com/SahilKhanWDC/css-utility-loader-webpack-.git) - Automatically parses and translates legacy CSS properties into modern utility classes (Tailwind) at build-time.
- [`less-loader`](/docs/loaders/less-loader) Loads and compiles a LESS file
- [`sass-loader`](/docs/loaders/sass-loader) Loads and compiles a SASS/SCSS file
- [`postcss-loader`](/docs/loaders/postcss-loader) Loads and transforms a CSS/SSS file using [PostCSS](http://postcss.org)
- [`stylus-loader`](/docs/loaders/stylus-loader) Loads and compiles a Stylus file

## Frameworks

- [`vue-loader`](https://github.com/vuejs/vue-loader) Loads and compiles [Vue Components](https://vuejs.org/v2/guide/components.html)
- [`angular2-template-loader`](https://github.com/TheLarkInn/angular2-template-loader) Loads and compiles [Angular](https://angular.io/) Components

## Awesome

For more third-party loaders, see the list from [awesome-webpack](https://github.com/webpack-contrib/awesome-webpack#loaders).
37 changes: 37 additions & 0 deletions pages/docs/plugins/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
authors: simon04,gonzoyumo,rouzbeh84,aretecode,eko3alpha,refactorized,byzyk,EugeneHlushko,snitin315,chenxsan
source: https://github.com/webpack/webpack-doc-kit/blob/main/pages/docs/plugins/index.md
---

# Plugins

Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack **flexible**.

| Name | Description |
| --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| [`BannerPlugin`](/docs/api/v5.x/plugins/BannerPlugin) | Add a banner to the top of each generated chunk |
| [`ChunksWebpackPlugin`](https://www.npmjs.com/package/chunks-webpack-plugin) | Create HTML files with entrypoints and chunks relations to serve your bundles |
| [`CompressionWebpackPlugin`](/docs/plugins/compression-webpack-plugin) | Prepare compressed versions of assets to serve them with Content-Encoding |
| [`ContextReplacementPlugin`](/docs/api/v5.x/plugins/ContextReplacementPlugin) | Override the inferred context of a `require` expression |
| [`CopyWebpackPlugin`](/docs/plugins/copy-webpack-plugin) | Copies individual files or entire directories to the build directory |
| [`DefinePlugin`](/docs/api/v5.x/plugins/DefinePlugin) | Allow global constants configured at compile time |
| [`DllPlugin`](/docs/api/v5.x/plugins/DllPlugin) | Split bundles in order to drastically improve build time |
| [`EnvironmentPlugin`](/docs/api/v5.x/plugins/EnvironmentPlugin) | Shorthand for using the [`DefinePlugin`](/docs/api/v5.x/plugins/DefinePlugin) on `process.env` keys |
| [`EslintWebpackPlugin`](/docs/plugins/eslint-webpack-plugin) | A ESLint plugin for webpack |
| [`HotModuleReplacementPlugin`](/docs/api/v5.x/plugins/HotModuleReplacementPlugin) | Enable Hot Module Replacement (HMR) |
| [`HtmlWebpackPlugin`](https://www.npmjs.com/package/html-webpack-plugin) | Easily create HTML files to serve your bundles |
| [`IgnorePlugin`](/docs/api/v5.x/plugins/IgnorePlugin) | Exclude certain modules from bundles |
| [`LimitChunkCountPlugin`](/docs/api/v5.x/optimize/LimitChunkCountPlugin) | Set min/max limits for chunking to better control chunking |
| [`MergeDuplicateChunksPlugin`](/docs/api/v5.x/optimize/MergeDuplicateChunksPlugin) | Merge chunks that contain the same modules |
| [`MinChunkSizePlugin`](/docs/api/v5.x/optimize/MinChunkSizePlugin) | Keep chunk size above the specified limit |
| [`MiniCssExtractPlugin`](/docs/plugins/mini-css-extract-plugin) | creates a CSS file per JS file which requires CSS |
| [`NoEmitOnErrorsPlugin`](/docs/api/v5.x/plugins/NoEmitOnErrorsPlugin) | Skip the emitting phase when there are compilation errors |
| [`NormalModuleReplacementPlugin`](/docs/api/v5.x/plugins/NormalModuleReplacementPlugin) | Replace resource(s) that matches a regexp |
| [`ProgressPlugin`](/docs/api/v5.x/plugins/ProgressPlugin) | Report compilation progress |
| [`ProvidePlugin`](/docs/api/v5.x/plugins/ProvidePlugin) | Use modules without having to use import/require |
| [`SourceMapDevToolPlugin`](/docs/api/v5.x/plugins/SourceMapDevToolPlugin) | Enables a more fine grained control of source maps |
| [`EvalSourceMapDevToolPlugin`](/docs/api/v5.x/plugins/EvalSourceMapDevToolPlugin) | Enables a more fine grained control of eval source maps |
| [`SvgChunkWebpackPlugin`](https://www.npmjs.com/package/svg-chunk-webpack-plugin) | Generate SVG sprites optimized by SVGO based on your entry point dependencies |
| [`MinimizerPlugin`](/docs/plugins/minimizer-webpack-plugin) | Uses Terser (or other) to minify the JS/CSS/HTML/JSON/etc in your project |

For more third-party plugins, see the list from [awesome-webpack](https://github.com/webpack-contrib/awesome-webpack#webpack-plugins).
Loading