Skip to content

Commit 28291ac

Browse files
committed
fix($readme): update
1 parent b3a9512 commit 28291ac

File tree

1 file changed

+25
-10
lines changed

1 file changed

+25
-10
lines changed

README.md

+25-10
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,34 @@
2121
2222
Like `extract-text-webpack-plugin`, but creates multiple css files (one per chunk). Then, as part of server side rendering, you can deliver just the css chunks needed by the current request. The result is the most minimal CSS initially served compared to emerging JS-in-CSS solutions.
2323

24+
For a demo, checkout: https://github.com/faceyspacey/flush-chunks-boilerplate-webpack-chunknames
25+
2426
*Note: this is a companion package to:*
2527
- [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks)
2628
- [react-universal-component](https://github.com/faceyspacey/react-universal-component)
2729
- [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)
2830

29-
For a complete usage example, see the [Flush Chunks Boilerplates](https://github.com/faceyspacey/webpack-flush-chunks#boilerplates).
31+
## Installation
32+
```
33+
yarn add --dev extract-css-chunks-webpack-plugin babel-plugin-dual-import
34+
```
35+
36+
*.babelrc:*
37+
```js
38+
{
39+
"presets": [whatever you usually have],
40+
"plugins": ["dual-import"]
41+
}
42+
```
43+
44+
*webpack.config.js:*
45+
```js
46+
plugins: [
47+
new ExtractCssChunks,
48+
]
49+
```
3050

51+
## Desired Output
3152
Here's the sort of CSS you can expect to serve:
3253

3354
```
@@ -49,19 +70,13 @@ Here's the sort of CSS you can expect to serve:
4970

5071
If you use [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks), it will scoop up the exact stylesheets to embed in your response string for you.
5172

52-
[babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import) is required for ascynchronous requests via `import()`. It requests both your js + your css. *Very Nice!* Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7).
73+
***As for asynchronous calls to `import()`,*** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import) is required. It requests both your js + your css. *Very Nice!* This is the new feature of the 2.0. Read *Sokra's* (author of webpack) article on how [on how this is the future of CSS for webpack](https://medium.com/webpack/the-new-css-workflow-step-1-79583bd107d7). Use this and be in the future today.
5374

54-
## Perks:
75+
## Perks
5576
- **HMR:** It also has first-class support for **Hot Module Replacement** across ALL those css files/chunks!!!
5677
- cacheable stylesheets
5778
- smallest total bytes sent compared to "render-path" css-in-js solutions that include your CSS definitions in JS
58-
- Faster than V1!
59-
60-
61-
## Installation
62-
```
63-
yarn add --dev extract-css-chunks-webpack-plugin
64-
```
79+
- Faster than the V1!
6580

6681

6782
## Usage

0 commit comments

Comments
 (0)