From 8c719ac4b9c445b2d0b6057bb35a58ef871af247 Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Rajak Date: Sun, 21 Jun 2026 18:34:49 +0000 Subject: [PATCH] feat(docs): add loaders and plugins index pages --- .gitignore | 6 ++-- .prettierignore | 6 ++-- pages/docs/loaders/index.md | 60 +++++++++++++++++++++++++++++++++++++ pages/docs/plugins/index.md | 37 +++++++++++++++++++++++ 4 files changed, 105 insertions(+), 4 deletions(-) create mode 100644 pages/docs/loaders/index.md create mode 100644 pages/docs/plugins/index.md diff --git a/.gitignore b/.gitignore index 60f03209..564a8d07 100644 --- a/.gitignore +++ b/.gitignore @@ -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 diff --git a/.prettierignore b/.prettierignore index 4f8d655b..c0258d5b 100644 --- a/.prettierignore +++ b/.prettierignore @@ -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 \ No newline at end of file diff --git a/pages/docs/loaders/index.md b/pages/docs/loaders/index.md new file mode 100644 index 00000000..0549e327 --- /dev/null +++ b/pages/docs/loaders/index.md @@ -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). diff --git a/pages/docs/plugins/index.md b/pages/docs/plugins/index.md new file mode 100644 index 00000000..0fdceb49 --- /dev/null +++ b/pages/docs/plugins/index.md @@ -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).