Skip to content

Commit 3468910

Browse files
fix(package.json): Updating dependency versions for hot loading
Using a version of normalize-url which is too new and could be causing issues
1 parent 7cb2bdb commit 3468910

File tree

3 files changed

+90
-15
lines changed

3 files changed

+90
-15
lines changed

README.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,85 @@
1919
</a>
2020
</p>
2121

22+
23+
> **HEADLINES (May 2018): Now Independently supports Webpack 4:**
24+
Yep that's right. The universal family is now fully Webpack 4. Thank you to all our users for your loyalty and patience! If you love Universal, then you are gonna fall head over heels when we bring out the main course!
25+
26+
2227
> **UPDATE (July 7th):** [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import) is now required to asynchronously import both css + js. *Much Faster Builds!* You likely want to read [its intro article](https://medium.com/@faceyspacey/webpacks-import-will-soon-fetch-js-css-here-s-how-you-do-it-today-4eb5b4929852).
2328
2429
> **UPDATE (July 26th):** [babel-plugin-universal-import](https://github.com/faceyspacey/babel-plugin-universal-import) is what to use if you're using *React Universal Component*.
2530
31+
So... why did we rebuild `extract-css-chunks`? What does it offer?
32+
33+
Its got all the goodness of `mini-css-extract-plugin` but with 2 gleaming, sought after benefits.
34+
35+
Compared to the existing loaders, we are offering a single solution as opposed to needing to depend on multiple loaders to cater for different features:
36+
37+
* Async loading
38+
* No duplicate compilation (performance)
39+
* Easier to use
40+
* Specific to CSS
41+
* True **Hot Module Reloading** - that means no `style-loader`
42+
* SSR Friendly development build, focused on frontend DX
43+
* Works seamlessly with the Universal family
44+
* Works fantastically as a standalone style loader (You can use it for any webpack project! with no extra dependencies!)
45+
46+
Additionally, if you are already a user of the universal family -- we will be waving goodbye to the mandatory ```window.__CSS_CHUNKS__```.
47+
48+
The functionality is still available to you via chunk flushing, and it can come in super handy when needing to easily resolve style assets as urls that might need to be passed to a third party.
49+
50+
##Webpack 4 Standalone Installation:
51+
52+
If you are just looking for something that works like `mini-css-extract-plugin` but with HMR. Then look no further
53+
54+
NOTE: We have aligned out loader implementation to be the same as `mini-css-extract-plugin`
55+
56+
**If you already use `mini-css-extract-plugin`, then you can just change the `require` statement - its that easy**
57+
58+
```
59+
yarn add --dev extract-css-chunks-webpack-plugin
60+
```
61+
62+
*webpack.config.js:*
63+
```js
64+
const ExtractCssChunks = require("extract-css-chunks-webpack-plugin")
65+
66+
module.exports = {
67+
module: {
68+
rules: [
69+
{
70+
test: /\.css$/,
71+
use: ExtractCssChunks.extract({
72+
use: {
73+
loader: 'css-loader',
74+
options: {
75+
modules: true,
76+
localIdentName: '[name]__[local]--[hash:base64:5]'
77+
}
78+
}
79+
})
80+
}
81+
]
82+
},
83+
plugins: [
84+
new ExtractCssChunks(),
85+
]
86+
}
87+
```
88+
89+
90+
91+
####What about Webpack 3?
92+
This is a breaking change. The entire loader has been fundamentally rewritten specifically for Webpack 4. Aiming to support our existing user base, allowing them to upgrade their infrastructure to support Webpack 4 based universally code-split server-side rendered react applications.
93+
94+
There have been some challenges along the way since the release of webpack 4. Ultimately the only remaining hurdle is code split, async style loading.
95+
96+
If you do need Webpack 3, make sure to stick with the latest `v2.x.x` release. `v3.x.x` is only intend for users with Webpack 4
97+
98+
99+
100+
26101
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 "render path" solutions.
27102

28103
For a demo, `git clone`: [universal-demo](https://github.com/faceyspacey/universal-demo)

package-lock.json

Lines changed: 13 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242
"dependencies": {
4343
"@webpack-contrib/schema-utils": "^1.0.0-beta.0",
4444
"loader-utils": "^1.1.0",
45-
"lodash": "^4.17.10",
46-
"normalize-url": "^3.0.0",
45+
"lodash": "^4.17.5",
46+
"normalize-url": "^1.9.1",
4747
"webpack-sources": "^1.1.0"
4848
},
4949
"devDependencies": {

0 commit comments

Comments
 (0)