| | |
|---|
| | | |
|---|
| | | **TL;DR** |
|---|
| | | |
|---|
| | | - Bundles [ES Modules](https://www.2ality.com/2014/09/es6-modules-final.html), [CommonJS](http://wiki.commonjs.org/), and [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) modules (even combined). |
|---|
| | | - Bundles [ES Modules](https://www.2ality.com/2014/09/es6-modules-final.html), [CommonJS](https://wiki.commonjs.org/), and [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) modules (even combined). |
|---|
| | | - Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time). |
|---|
| | | - Dependencies are resolved during compilation, reducing the runtime size. |
|---|
| | | - Loaders can preprocess files while compiling, e.g. TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64, etc. |
|---|
| | |
|---|
| | | | Name | Status | Install Size | Description | |
|---|
| | | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------: | :--------------: | :-------------------------------------------------------------------------------------- | |
|---|
| | | | <a href="https://github.com/webpack-contrib/html-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"></a> | ![html-npm] | ![html-size] | Exports HTML as string, requires references to static resources | |
|---|
| | | | <a href="https://github.com/pugjs/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> | ![pug-npm] | ![pug-size] | Loads Pug templates and returns a function | |
|---|
| | | | <a href="https://github.com/webdiscus/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> | ![pug3-npm] | ![pug3-size] | Compiles Pug to a function or HTML string, useful for use with Vue, React, Angular | |
|---|
| | | | <a href="https://github.com/webdiscus/pug-loader"><img width="48" height="48" src="https://cdn.rawgit.com/pugjs/pug-logo/master/SVG/pug-final-logo-_-colour-128.svg"></a> | ![pug-npm] | ![pug-size] | Compiles Pug to a function or HTML string, useful for use with Vue, React, Angular | |
|---|
| | | | <a href="https://github.com/peerigon/markdown-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg"></a> | ![md-npm] | ![md-size] | Compiles Markdown to HTML | |
|---|
| | | | <a href="https://github.com/posthtml/posthtml-loader"><img width="48" height="48" src="https://posthtml.github.io/posthtml/logo.svg"></a> | ![posthtml-npm] | ![posthtml-size] | Loads and transforms a HTML file using [PostHTML](https://github.com/posthtml/posthtml) | |
|---|
| | | | <a href="https://github.com/pcardune/handlebars-loader"><img width="48" height="48" src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/handlebars/handlebars-original.svg"></a> | ![hbs-npm] | ![hbs-size] | Compiles Handlebars to HTML | |
|---|
| | | |
|---|
| | | [html-npm]: https://img.shields.io/npm/v/html-loader.svg |
|---|
| | | [html-size]: https://packagephobia.com/badge?p=html-loader |
|---|
| | | [pug-npm]: https://img.shields.io/npm/v/pug-loader.svg |
|---|
| | | [pug-size]: https://packagephobia.com/badge?p=pug-loader |
|---|
| | | [pug3-npm]: https://img.shields.io/npm/v/@webdiscus/pug-loader.svg |
|---|
| | | [pug3-size]: https://packagephobia.com/badge?p=@webdiscus/pug-loader |
|---|
| | | [pug-npm]: https://img.shields.io/npm/v/@webdiscus/pug-loader.svg |
|---|
| | | [pug-size]: https://packagephobia.com/badge?p=@webdiscus/pug-loader |
|---|
| | | [jade-npm]: https://img.shields.io/npm/v/jade-loader.svg |
|---|
| | | [jade-size]: https://packagephobia.com/badge?p=jade-loader |
|---|
| | | [md-npm]: https://img.shields.io/npm/v/markdown-loader.svg |
|---|
| | |
|---|
| | | |
|---|
| | | <p>(In chronological order)</p> |
|---|
| | | |
|---|
| | | - [@google](https://github.com/google) for [Google Web Toolkit (GWT)](http://www.gwtproject.org/), which aims to compile Java to JavaScript. It features a similar [Code Splitting](http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html) as webpack. |
|---|
| | | - [@google](https://github.com/google) for [Google Web Toolkit (GWT)](https://www.gwtproject.org/), which aims to compile Java to JavaScript. It features a similar [Code Splitting](https://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html) as webpack. |
|---|
| | | - [@medikoo](https://github.com/medikoo) for [modules-webmake](https://github.com/medikoo/modules-webmake), which is a similar project. webpack was born because of the desire for code splitting for modules such as Webmake. Interestingly, the [Code Splitting issue is still open](https://github.com/medikoo/modules-webmake/issues/7) (thanks also to @Phoscur for the discussion). |
|---|
| | | - [@substack](https://github.com/substack) for [browserify](https://browserify.org/), which is a similar project and source for many ideas. |
|---|
| | | - [@jrburke](https://github.com/jrburke) for [require.js](https://requirejs.org/), which is a similar project and source for many ideas. |
|---|
