1 | # extract text plugin for webpack
|
2 |
|
3 | ## Usage example with css
|
4 |
|
5 | ``` javascript
|
6 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
|
7 | module.exports = {
|
8 | module: {
|
9 | loaders: [
|
10 | { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
|
11 | ]
|
12 | },
|
13 | plugins: [
|
14 | new ExtractTextPlugin("styles.css")
|
15 | ]
|
16 | }
|
17 | ```
|
18 |
|
19 | 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.
|
20 |
|
21 | Advantages:
|
22 |
|
23 | * Fewer style tags (older IE has a limit)
|
24 | * CSS SourceMap (with `devtool: "source-map"` and `css-loader?sourceMap`)
|
25 | * CSS requested in parallel
|
26 | * CSS cached separate
|
27 | * Faster runtime (less code and DOM operations)
|
28 |
|
29 | Caveats:
|
30 |
|
31 | * Additional HTTP request
|
32 | * Longer compilation time
|
33 | * More complex configuration
|
34 | * No runtime public path modification
|
35 | * No Hot Module Replacement
|
36 |
|
37 | ## API
|
38 |
|
39 | ``` javascript
|
40 | new ExtractTextPlugin([id: string], filename: string, [options])
|
41 | ```
|
42 |
|
43 | * `id` Unique ident for this plugin instance. (For advanded usage only, by default automatic generated)
|
44 | * `filename` the filename of the result file. May contain `[name]`, `[id]` and `[contenthash]`.
|
45 | * `[name]` the name of the chunk
|
46 | * `[id]` the number of the chunk
|
47 | * `[contenthash]` a hash of the content of the extracted file
|
48 | * `options`
|
49 | * `allChunks` extract from all additional chunks too (by default it extracts only from the initial chunk(s))
|
50 | * `disable` disables the plugin
|
51 |
|
52 | The `ExtractTextPlugin` generates an output file per entry, so you must use `[name]`, `[id]` or `[contenthash]` when using multiple entries.
|
53 |
|
54 | ``` javascript
|
55 | ExtractTextPlugin.extract([notExtractLoader], loader, [options])
|
56 | ```
|
57 |
|
58 | Creates an extracting loader from an existing loader.
|
59 |
|
60 | * `notExtractLoader` (optional) the loader(s) that should be used when the css is not extracted (i.e. in an additional chunk when `allChunks: false`)
|
61 | * `loader` the loader(s) that should be used for converting the resource to a css exporting module.
|
62 | * `options`
|
63 | * `publicPath` override the `publicPath` setting for this loader.
|
64 |
|
65 | There is also an `extract` function on the instance. You should use this if you have more than one ExtractTextPlugin.
|
66 |
|
67 | ```javascript
|
68 | let ExtractTextPlugin = require('extract-text-webpack-plugin');
|
69 |
|
70 | // multiple extract instances
|
71 | let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
|
72 | let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');
|
73 |
|
74 | module.exports = {
|
75 | ...
|
76 | module: {
|
77 | loaders: [
|
78 | {test: /\.scss$/i, loader: extractCSS.extract(['css','sass'])},
|
79 | {test: /\.less$/i, loader: extractLESS.extract(['css','less'])},
|
80 | ...
|
81 | ]
|
82 | },
|
83 | plugins: [
|
84 | extractCSS,
|
85 | extractLESS
|
86 | ]
|
87 | };
|
88 | ```
|
89 |
|
90 | ## License
|
91 |
|
92 | MIT (http://www.opensource.org/licenses/mit-license.php)
|