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
1.[Read and sign the CLA](https://cla.js.foundation/webpack/webpack.js.org). This needs to be done only once. PRs that haven't signed it won't be accepted.
2
+
2. Make sure your PR complies with [the writer's guide](https://webpack.js.org/writers-guide/).
3
+
3. Read through the PR diff carefully as sometimes this can reveal issues. The work will be reviewed, but this can save some effort.
4
+
4. Remove these instructions from your PR as they are for your eyes only.
The API has changed since version 1. For the webpack 1 version, see [the README in the webpack-1 branch](https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md).
4
-
5
-
## Install
6
-
7
-
> You can either install it with [npm](https://nodejs.org/en/) or [yarn](https://yarnpkg.com/)
It moves every `require("style.css")` in entry chunks into a separate css output file. So your styles are no longer inlined into the javascript, but separate in a css bundle file (`styles.css`). If your total stylesheet volume is big, it will be faster because the stylesheet bundle is loaded in parallel to the javascript bundle.
37
-
38
-
Advantages:
49
+
It moves every `require("style.css")` in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but separate in a CSS bundle file (`styles.css`). If your total stylesheet volume is big, it will be faster because the CSS bundle is loaded in parallel to the JS bundle.
39
50
40
-
* Fewer style tags (older IE has a limit)
41
-
* CSS SourceMap (with `devtool: "source-map"` and `css-loader?sourceMap`)
42
-
* CSS requested in parallel
43
-
* CSS cached separate
44
-
* Faster runtime (less code and DOM operations)
51
+
|Advantages|Caveats|
52
+
|:---------|:------|
53
+
| Fewer style tags (older IE has a limit) | Additional HTTP request |
54
+
| CSS SourceMap (with `devtool: "source-map"` and `extract-text-webpack-plugin?sourceMap`) | Longer compilation time |
55
+
| CSS requested in parallel | No runtime public path modification |
56
+
| CSS cached separate | No Hot Module Replacement |
57
+
| Faster runtime (less code and DOM operations) | ... |
45
58
46
-
Caveats:
59
+
<h2align="center">Options</h2>
47
60
48
-
* Additional HTTP request
49
-
* Longer compilation time
50
-
* More complex configuration
51
-
* No runtime public path modification
52
-
* No Hot Module Replacement
53
-
54
-
## API
55
-
56
-
```javascript
61
+
```js
57
62
newExtractTextPlugin(options: filename | object)
58
63
```
59
64
60
-
*`options.filename: string`_(required)_ the filename of the result file. May contain `[name]`, `[id]` and `[contenthash]`
61
-
*`[name]` the name of the chunk
62
-
*`[id]` the number of the chunk
63
-
*`[contenthash]` a hash of the content of the extracted file
64
-
*`options.allChunks: boolean` extract from all additional chunks too (by default it extracts only from the initial chunk(s))
65
-
*`options.disable: boolean` disables the plugin
66
-
*`options.id: string` Unique ident for this plugin instance. (For advanced usage only, by default automatically generated)
65
+
|Name|Type|Description|
66
+
|:--:|:--:|:----------|
67
+
|**`id`**|`{String}`|Unique ident for this plugin instance. (For advanced usage only, by default automatically generated)|
68
+
|**`filename`**|`{String}`|Name of the result file. May contain `[name]`, `[id]` and `[contenthash]`|
69
+
|**`options.allChunks`**|`{Boolean}`|Extract from all additional chunks too (by default it extracts only from the initial chunk(s))|
70
+
|**`options.disable`**|`{Boolean}`|Disables the plugin|
71
+
72
+
*`[name]` name of the chunk
73
+
*`[id]` number of the chunk
74
+
*`[contenthash]` hash of the content of the extracted file
75
+
76
+
> :warning:`ExtractTextPlugin` generates a file **per entry**, so you must use `[name]`, `[id]` or `[contenthash]` when using multiple entries.
67
77
68
-
The `ExtractTextPlugin` generates an output file per entry, so you must use `[name]`, `[id]` or `[contenthash]` when using multiple entries.
Creates an extracting loader from an existing loader. Supports loaders of type `{ loader: string; query: object }`.
75
85
76
-
*`options.loader: string | object | loader[]`_(required)_ the loader(s) that should be used for converting the resource to a css exporting module
77
-
*`options.fallbackLoader: string | object | loader[]` the loader(s) that should be used when the css is not extracted (i.e. in an additional chunk when `allChunks: false`)
78
-
*`options.publicPath: string` override the `publicPath` setting for this loader
86
+
|Name|Type|Description|
87
+
|:--:|:--:|:----------|
88
+
|**`options.loader`**|`{String}`/`{Object}`|Loader(s) that should be used for converting the resource to a CSS exporting module _(required)_|
89
+
|**`options.fallbackLoader`**|`{String}`/`{Object}`|loader(e.g `'style-loader'`) that should be used when the CSS is not extracted (i.e. in an additional chunk when `allChunks: false`)|
90
+
|**`options.publicPath`**|`{String}`|Override the `publicPath` setting for this loader|
79
91
80
-
There is also an `extract` function on the instance. You should use this if you have more than one `ExtractTextPlugin`.
81
92
82
-
```javascript
83
-
let ExtractTextPlugin =require('extract-text-webpack-plugin');
93
+
#### Multiple Instances
84
94
85
-
// multiple extract instances
86
-
let extractCSS =newExtractTextPlugin('stylesheets/[name].css');
87
-
let extractLESS =newExtractTextPlugin('stylesheets/[name].less');
95
+
There is also an `extract` function on the instance. You should use this if you have more than one instance of `ExtractTextPlugin`.
0 commit comments