You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+18-21Lines changed: 18 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,16 +6,22 @@
6
6
7
7
# Introduction
8
8
9
-
Webpack is a bundler for modules. The main purpose is to bundle javascript files for usage in a browser.
9
+
Webpack is a bundler for modules. The main purpose is to bundle javascript
10
+
files for usage in a browser, yet it is also capable of transforming, bundling,
11
+
or packaging just about any resource or asset.
12
+
10
13
11
14
**TL;DR**
12
15
13
16
* Bundles both [CommonJs](http://www.commonjs.org/specs/modules/1.0/) and [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) modules (even combined).
14
17
* Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time).
15
18
* Dependencies are resolved during compilation reducing the runtime size.
16
19
* Loaders can preprocess files while compiling, e.g. coffeescript to javascript, handlebars strings to compiled functions, images to Base64, etc.
20
+
* Highly modular plugin system to do whatever else your application requires.
21
+
22
+
# Getting Started
17
23
18
-
Check out Webpack's [documentation](http://webpack.github.io/docs/?utm_source=github&utm_medium=readme&utm_campaign=trdr) for quick Getting Started, in-depth usage,
24
+
Check out Webpack's [documentation](http://webpack.github.io/docs/?utm_source=github&utm_medium=readme&utm_campaign=trdr) for quick Getting Started guide, in-depth usage,
Take a look at the [`examples`](https://github.com/webpack/webpack/tree/master/examples) folder.
32
40
33
-
34
41
# Features
35
42
36
43
## Plugins
@@ -40,6 +47,7 @@ interface](http://webpack.github.io/docs/plugins.html). Most of the features
40
47
within webpack itself use this plugin interface. This makes webpack very
41
48
**flexible**.
42
49
50
+
43
51
## Performance
44
52
45
53
Webpack uses async I/O and has multiple caching levels. This makes webpack fast
@@ -51,7 +59,7 @@ Webpack enables use of loaders to preprocess files. This allows you to bundle
51
59
**any static resource** way beyond javascript. You can easily [write your own
52
60
loaders](http://webpack.github.io/docs/loaders.html) using node.js.
53
61
54
-
Loaders are activated by using `loadername!`strings in `require()` statements,
62
+
Loaders are activated by using `loadername!`prefixes in `require()` statements,
55
63
or are automatically applied via regex from your webpack configuration.
56
64
57
65
Please see [Using Loaders](http://webpack.github.io/docs/using-loaders.html) for more information.
@@ -83,43 +91,32 @@ Please see [Using Loaders](http://webpack.github.io/docs/using-loaders.html) for
83
91
*[`jade`](https://github.com/webpack/jade-loader): Loads jade template and returns a function
84
92
*[`handlebars`](https://github.com/altano/handlebars-loader): Loads handlebars template and returns a function
85
93
*[`ractive`](https://github.com/rstacruz/ractive-loader): Pre-compiles Ractive templates for interactive DOM manipulation
86
-
*[`jsx`](https://github.com/petehunt/jsx-loader): Transform jsx code for [React](http://facebook.github.io/react/) to js code.
87
-
*[`em`](https://github.com/yoshdog/emblem-loader): Compiles [Emblem](http://emblemjs.com/) to Handlebars.js
88
-
*[`ejs`](https://github.com/okonet/ejs-loader): Loads EJS ([underscore](http://underscorejs.org/#template)( templating engine) template and returns a pre-compiled function
89
94
*[`markdown`](https://github.com/peerigon/markdown-loader): Compiles Markdown to HTML
90
95
*[`ng-cache`](https://github.com/teux/ng-cache-loader): Puts HTML partials in the Angular's $templateCache
91
96
92
97
**styling**
93
-
*[`bootstrap-sass`](https://github.com/justin808/bootstrap-sass-loader): Loads a configuration file for Twitter Bootstrap integration using Sass. Allows complete customization via Sass.
94
98
*[`style`](https://github.com/webpack/style-loader): Add exports of a module as style to DOM
95
99
*[`css`](https://github.com/webpack/css-loader): Loads css file with resolved imports and returns css code
96
100
*[`less`](https://github.com/webpack/less-loader): Loads and compiles a less file
97
101
*[`sass`](https://github.com/jtangelder/sass-loader): Loads and compiles a scss file
98
102
*[`stylus`](https://github.com/shama/stylus-loader): Loads and compiles a stylus file
99
-
*[`rework`](https://github.com/okonet/rework-loader): Post-process CSS with [Rework](https://github.com/reworkcss/rework) and returns CSS code
100
-
*[`postcss`](https://github.com/postcss/postcss-loader): Post-process CSS with Autoprefixer and [other PostCSS plugins](https://github.com/postcss/postcss#built-with-postcss)
101
-
*[`autoprefixer`](https://github.com/passy/autoprefixer-loader): Add vendor prefixes to CSS rules using values from Can I Use
102
-
*[`namespace-css`](https://github.com/jeffling/namespace-css-loader): Namespace your css with a given selector (for encapsulating all rules in one subset of your site)
103
103
104
-
**translation**
104
+
**misc**
105
105
*[`po`](https://github.com/dschissler/po-loader): Loads a PO gettext file and returns JSON
106
-
107
-
**support**
108
-
*[`mocha`](https://github.com/webpack/mocha-loader): do tests with mocha in browser or node.js
106
+
*[`mocha`](https://github.com/webpack/mocha-loader): Do tests with mocha in browser or node.js
109
107
*[`eslint`](https://github.com/MoOx/eslint-loader): PreLoader for linting code using ESLint.
110
108
*[`jshint`](https://github.com/webpack/jshint-loader): PreLoader for linting code.
111
109
*[`jscs`](https://github.com/unindented/jscs-loader): PreLoader for style checking.
112
110
*[`injectable`](https://github.com/jauco/webpack-injectable): Allow to inject dependencies into modules
113
111
*[`transform`](https://github.com/webpack/transform-loader): Use browserify transforms as loader.
114
-
*[`image-size`](https://github.com/patcoll/image-size-loader): Loads an image and returns its dimensions and type
115
112
116
-
For the full list of loaders, please see [list of loaders](http://webpack.github.io/docs/list-of-loaders.html)
113
+
For the full list of loaders, see [list of loaders](http://webpack.github.io/docs/list-of-loaders.html).
117
114
118
-
## Support
115
+
## Module Format (AMD/CommonJS)
119
116
120
-
Webpack supports **AMD and CommonJS** module styles. It performs clever static
117
+
Webpack supports **both**AMD and CommonJS module styles. It performs clever static
121
118
analysis on the AST of your code. It even has an evaluation engine to evaluate
122
-
simple expressions. This allows you to **support most existing libraries**.
119
+
simple expressions. This allows you to **support most existing libraries** out of the box.
0 commit comments