From a1bb9c7ae92206e39f03403e12e7ae3f781efea5 Mon Sep 17 00:00:00 2001 From: Tien Date: Tue, 15 May 2018 11:14:31 +0700 Subject: [PATCH 1/2] Update code-splitting.md Since webpack 4, when using `dynamic import` to resolve commonJS module, it no longer resolve directly to the value of `module.exports`, but create an artificial namespace object to wrap it instead. --- src/content/guides/code-splitting.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/content/guides/code-splitting.md b/src/content/guides/code-splitting.md index 440d2cd83624..d072819dd17d 100644 --- a/src/content/guides/code-splitting.md +++ b/src/content/guides/code-splitting.md @@ -24,6 +24,7 @@ contributors: - kcolton - efreitasn - EugeneHlushko + - Tiendo1011 related: - title: in webpack url: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c @@ -242,7 +243,7 @@ __src/index.js__ - - // Lodash, now imported by this script - element.innerHTML = _.join(['Hello', 'webpack'], ' '); -+ return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => { ++ return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => { + var element = document.createElement('div'); + + element.innerHTML = _.join(['Hello', 'webpack'], ' '); @@ -258,6 +259,8 @@ __src/index.js__ + }) ``` +The reason we need `default` is since webpack 4, when importing a CommonJS module, the import will no longer resolve to the value of `module.exports`, it will instead create an artificial namespace object for the CommonJS module, for more information on the reason behind this, read [webpack 4: import() and CommonJs](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655) + Note the use of `webpackChunkName` in the comment. This will cause our separate bundle to be named `lodash.bundle.js` instead of just `[id].bundle.js`. For more information on `webpackChunkName` and the other available options, see the [`import()` documentation](/api/module-methods#import-). Let's run webpack to see `lodash` separated out to a separate bundle: ``` bash @@ -289,7 +292,7 @@ __src/index.js__ - - }).catch(error => 'An error occurred while loading the component'); + var element = document.createElement('div'); -+ const _ = await import(/* webpackChunkName: "lodash" */ 'lodash'); ++ const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash'); + + element.innerHTML = _.join(['Hello', 'webpack'], ' '); + From 840b33a0b2a91bdc502be99563830d53fbbabdb7 Mon Sep 17 00:00:00 2001 From: Tien Date: Fri, 24 Aug 2018 23:29:07 +0700 Subject: [PATCH 2/2] Update code-splitting.md --- src/content/guides/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/code-splitting.md b/src/content/guides/code-splitting.md index bc9c613545cf..cdfaf8628de4 100644 --- a/src/content/guides/code-splitting.md +++ b/src/content/guides/code-splitting.md @@ -275,7 +275,7 @@ __src/index.js__ ``` diff - function getComponent() { + async function getComponent() { -- return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => { +- return import(/* webpackChunkName: "lodash" */ 'lodash').then({ default: _ } => { - var element = document.createElement('div'); - - element.innerHTML = _.join(['Hello', 'webpack'], ' ');