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. Check out the [development guide](https://webpack.js.org/development/) for the API and development guidelines.
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.
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
***options:** pass proper loader options to children ([#266](https://github.com/webpack/extract-text-webpack-plugin/issues/266)) ([6abf42d](https://github.com/webpack/extract-text-webpack-plugin/commit/6abf42d))
***extract:** return an array of loader objects ([#343](https://github.com/webpack/extract-text-webpack-plugin/issues/343)) ([74b86e0](https://github.com/webpack/extract-text-webpack-plugin/commit/74b86e0))
44
+
45
+
46
+
47
+
# Change Log
48
+
49
+
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
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:
39
-
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)
45
-
46
-
Caveats:
52
+
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.
47
53
48
-
* Additional HTTP request
49
-
* Longer compilation time
50
-
* More complex configuration
51
-
* No runtime public path modification
52
-
* No Hot Module Replacement
54
+
|Advantages|Caveats|
55
+
|:---------|:------|
56
+
| Fewer style tags (older IE has a limit) | Additional HTTP request |
57
+
| CSS SourceMap (with `devtool: "source-map"` and `extract-text-webpack-plugin?sourceMap`) | Longer compilation time |
58
+
| CSS requested in parallel | No runtime public path modification |
59
+
| CSS cached separate | No Hot Module Replacement |
60
+
| Faster runtime (less code and DOM operations) | ... |
53
61
54
-
## API
62
+
<h2align="center">Options</h2>
55
63
56
-
```javascript
64
+
```js
57
65
newExtractTextPlugin(options: filename | object)
58
66
```
59
67
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)
67
-
*`filenamefilter` function to modify path and filename before files are emitted
68
-
```javascript
69
-
{
70
-
filenamefilter:function(filename) {
71
-
// modify filename
72
-
return filename;
73
-
}
74
-
}
75
-
```
68
+
|Name|Type|Description|
69
+
|:--:|:--:|:----------|
70
+
|**`id`**|`{String}`|Unique ident for this plugin instance. (For advanced usage only, by default automatically generated)|
71
+
|**`filename`**|`{String}`|Name of the result file. May contain `[name]`, `[id]` and `[contenthash]`|
72
+
|**`allChunks`**|`{Boolean}`|Extract from all additional chunks too (by default it extracts only from the initial chunk(s))|
73
+
|**`disable`**|`{Boolean}`|Disables the plugin|
74
+
|**`ignoreOrder`**|`{Boolean}`|Disables order check (useful for CSS Modules!), `false` by default|
75
+
76
+
*`[name]` name of the chunk
77
+
*`[id]` number of the chunk
78
+
*`[contenthash]` hash of the content of the extracted file
76
79
77
-
The `ExtractTextPlugin` generates an output file per entry, so you must use `[name]`, `[id]` or `[contenthash]` when using multiple entries.
80
+
> :warning:`ExtractTextPlugin` generates a 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 }`.
88
+
Creates an extracting loader from an existing loader. Supports loaders of type `{ loader: [name]-loader -> {String}, options: {} -> {Object} }`.
89
+
90
+
|Name|Type|Description|
91
+
|:--:|:--:|:----------|
92
+
|**`options.use`**|`{String}`/`{Array}`/`{Object}`|Loader(s) that should be used for converting the resource to a CSS exporting module _(required)_|
93
+
|**`options.fallback`**|`{String}`/`{Array}`/`{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`)|
94
+
|**`options.publicPath`**|`{String}`|Override the `publicPath` setting for this loader|
84
95
85
-
*`options.loader: string | object | loader[]`_(required)_ the loader(s) that should be used for converting the resource to a css exporting module
86
-
*`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`)
87
-
*`options.publicPath: string` override the `publicPath` setting for this loader
88
96
89
-
There is also an `extract` function on the instance. You should use this if you have more than one `ExtractTextPlugin`.
97
+
#### Multiple Instances
90
98
91
-
```javascript
92
-
let ExtractTextPlugin =require('extract-text-webpack-plugin');
99
+
There is also an `extract` function on the instance. You should use this if you have more than one instance of `ExtractTextPlugin`.
93
100
94
-
// multiple extract instances
95
-
let extractCSS =newExtractTextPlugin('stylesheets/[name].css');
96
-
let extractLESS =newExtractTextPlugin('stylesheets/[name].less');
0 commit comments