fix($compliation): make work when chunk names not used + add better e…

…xample to readme
faceyspacey · Jul 21, 2017 · e814d9d · e814d9d
1 parent 36d0462
commit e814d9d
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@
 </p>
 
 # extract-css-chunks-webpack-plugin
-> **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
+> **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). Note: with *webpack-flush-chunks* you will have to use the `chunkNames` option instead of the `moduleIds` option to use it. 
 
 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.
 
@@ -123,6 +123,47 @@ Keep in mind, by default `[name].css` is used when `process.env.NODE_ENV === 'de
 
 The 2 exceptions are: `allChunks` will no longer do anything, and `fallback` will no longer do anything when passed to to `extract`. Basically just worry about passing your `css-loader` string and `localIdentName` 🤓
 
+## Usage with [react-universal-component](https://github.com/faceyspacey/react-universal-component), [webpack-flush-chunks](https://github.com/faceyspacey/webpack-flush-chunks) and [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)
+
+When using `webpack-flush-chunks` you will have to supply the `chunkNames` option, not the `moduleIds` option since the babel plugin is based on chunk names. Here's an example:
+
+*src/components/App.js:*
+```js
+const UniversalComponent = universal(() => import('./Foo'), {
+  resolve: () => require.resolveWeak('./Foo'),
+  chunkName: 'Foo'
+})
+
+const UniversalDynamicComponent = universal(() => import(`./base/${page}`), {
+  resolve: ({ page }) => require.resolveWeak(`./base/${page}`),
+  chunkName: ({ page }) => `base/${page}`
+})
+
+```
+*server/render.js:*
+```js
+import { flushChunkNames } from 'react-universal-component/server'
+import flushChunks from 'webpack-flush-chunks'
+
+const app = ReactDOMServer.renderToString(<App />)
+const { js, styles, cssHash } = flushChunks(webpackStats, {
+  chunkNames: flushChunkNames()
+})
+
+res.send(`
+  <!doctype html>
+  <html>
+    <head>
+      ${styles}
+    </head>
+    <body>
+      <div id="root">${app}</div>
+      ${js}
+      ${cssHash}
+    </body>
+  </html>
+`)
+```
 
 ## What about Aphrodite, Glamor, StyleTron, Styled-Components, Styled-Jsx, etc?
 

diff --git a/index.js b/index.js
@@ -293,23 +293,21 @@ ExtractTextPlugin.prototype.apply = function(compiler) {
 		// HMR: inject file name into corresponding javascript modules in order to trigger
 		// appropriate hot module reloading of CSS
 		if (DEV) {
-			compilation.plugin("optimize-module-ids", function(modules){
+			compilation.plugin("before-chunk-assets", function() {
 				extractedChunks.forEach(function(extractedChunk) {
-					extractedChunk.modules.forEach(function (module) {
-						if(module.__fileInjected) {
-							return;
-						}
+					extractedChunk.modules.forEach(function(module) {
+						if(module.__fileInjected) return;
 						module.__fileInjected = true;
 
-						extractedChunk.modules.forEach(function(module){
-							var originalModule = module.getOriginalModule();
-							var file = getFile(compilation, filename, module, extractedChunk);
-							originalModule._source._value = originalModule._source._value.replace('%%extracted-file%%', file);
-						});
+						var originalModule = module.getOriginalModule();
+						var file = getFile(compilation, filename, module, extractedChunk.originalChunk);
+						originalModule._source._value = originalModule._source._value.replace('%%extracted-file%%', file);
 					});
 				});
 			});
 		}
+
+		// add the css files to assets and the files array corresponding to its chunks
 		compilation.plugin("additional-assets", function(callback) {
 			extractedChunks.forEach(function(extractedChunk) {	
 				if(extractedChunk.modules.length) {
@@ -321,12 +319,11 @@ ExtractTextPlugin.prototype.apply = function(compiler) {
 						return getOrder(a, b);
 					});
 
+					var stylesheet = this.renderExtractedChunk(extractedChunk);
 					var chunk = extractedChunk.originalChunk;
-					var module = this.renderExtractedChunk(extractedChunk);
-					var file = getFile(compilation, filename, module, extractedChunk)
+					var file = getFile(compilation, filename, stylesheet, chunk)
 
-					// add the css files to assets and the files array corresponding to its chunk
-					compilation.assets[file] = module;
+					compilation.assets[file] = stylesheet;
 					chunk.files.push(file);
 				}
 			}, this);