Hey there 👋

My name is David.

I've been writing software for quite a while now. I primarily work in web applications, and in the past 5-6 years have been on a deep dive of the JavaScript ecosystem.

📌 Pinned Repos

These are some open source libraries and applications I've worked on at edX over the past few years. They're good examples of some of my professional work, and are core modules of the Open edX Platform. You'll also see the Lyceum Games "Venture" platform, which is a JavaScript-based storytelling platform I've been writing for a number of years.

📖 Public Repos

The other public repositories here are primarily teaching materials that I've shared with my coworkers over the years. I've taught folks about ES6, Webpack, React, Redux, and a programming fundamentals with Ruby class once upon a time.

renaming some dynamic imports doesnt work

$ git log -1
commit ec191ec799a49d41cb7d05422836ce8a44ea2e4c (HEAD -> master, origin/master, origin/HEAD)
Author: David Joy <[email protected]>
Date:   Tue Jul 13 13:39:42 2021 -0400

    webpack-4 -> webpack-5

$ git diff


$ rm -f build/* && npm run build && ls -lah build/

> [email protected] build
> NODE_ENV=production ./node_modules/.bin/webpack --config=./config/webpack.config.js

(node:85312) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(Use `node --trace-deprecation ...` to show where the warning was created)
asset main.f5564cc05572c5a528f1.bundle.js 3.53 KiB [emitted] [immutable] [minimized] (name: main)
asset showCats.f5564cc05572c5a528f1.bundle.js 450 bytes [emitted] [immutable] [minimized] (name: showCats)
asset slowCat.f5564cc05572c5a528f1.bundle.js 237 bytes [emitted] [immutable] [minimized] (name: slowCat)
asset cats.f5564cc05572c5a528f1.bundle.js 190 bytes [emitted] [immutable] [minimized] (name: cats)
runtime modules 7.91 KiB 11 modules
cacheable modules 1.77 KiB
  ./src/main.js 1000 bytes [built] [code generated]
  ./src/showCats.js 533 bytes [built] [code generated]
  ./src/cats.js 109 bytes [built] [code generated]
  ./src/slowCat.js 171 bytes [built] [code generated]
webpack 5.44.0 compiled successfully in 435 ms
total 32
drwxr-xr-x  6 admin  admin   192B Oct 26 16:35 .
drwxr-xr-x  9 admin  admin   288B Oct 26 16:32 ..
-rw-r--r--  1 admin  admin   190B Oct 26 16:35 cats.f5564cc05572c5a528f1.bundle.js
-rw-r--r--  1 admin  admin   3.5K Oct 26 16:35 main.f5564cc05572c5a528f1.bundle.js
-rw-r--r--  1 admin  admin   450B Oct 26 16:35 showCats.f5564cc05572c5a528f1.bundle.js
-rw-r--r--  1 admin  admin   237B Oct 26 16:35 slowCat.f5564cc05572c5a528f1.bundle.js

This is what the build outputs now.

When I rename one of the dynamic imports:

diff --git a/14-dynamic-imports/src/main.js b/14-dynamic-imports/src/main.js
index f3d8a9e..fa62356 100644
--- a/14-dynamic-imports/src/main.js
+++ b/14-dynamic-imports/src/main.js
@@ -1,7 +1,7 @@
 document.title = 'Ze Cats';

 // The "webpackChunkName" comment below is magic - it causes the bundle for showCats to be named showCats.bundle.js instead of 0.bundle.js
-import(/* webpackChunkName: "showCats" */ 'showCats')
+import(/* webpackChunkName: "differentName" */ 'showCats')
   // Destructured object parameter, renamed to "showCats".
   // What's this default thing?  https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655
   .then(({ default: showCats }) => {

$ rm -f build/* && npm run build && ls -lah build/

> [email protected] build
> NODE_ENV=production ./node_modules/.bin/webpack --config=./config/webpack.config.js

(node:85420) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(Use `node --trace-deprecation ...` to show where the warning was created)
asset main.b2abee0da6d507abb56a.bundle.js 3.53 KiB [emitted] [immutable] [minimized] (name: main)
asset differentName.b2abee0da6d507abb56a.bundle.js 450 bytes [emitted] [immutable] [minimized] (name: differentName)
asset slowCat.b2abee0da6d507abb56a.bundle.js 237 bytes [emitted] [immutable] [minimized] (name: slowCat)
asset cats.b2abee0da6d507abb56a.bundle.js 190 bytes [emitted] [immutable] [minimized] (name: cats)
runtime modules 7.91 KiB 11 modules
cacheable modules 1.78 KiB
  ./src/main.js 1010 bytes [built] [code generated]
  ./src/showCats.js 533 bytes [built] [code generated]
  ./src/cats.js 109 bytes [built] [code generated]
  ./src/slowCat.js 171 bytes [built] [code generated]
webpack 5.44.0 compiled successfully in 437 ms
total 32
drwxr-xr-x  6 admin  admin   192B Oct 26 16:36 .
drwxr-xr-x  9 admin  admin   288B Oct 26 16:32 ..
-rw-r--r--  1 admin  admin   190B Oct 26 16:36 cats.b2abee0da6d507abb56a.bundle.js
-rw-r--r--  1 admin  admin   450B Oct 26 16:36 differentName.b2abee0da6d507abb56a.bundle.js
-rw-r--r--  1 admin  admin   3.5K Oct 26 16:36 main.b2abee0da6d507abb56a.bundle.js
-rw-r--r--  1 admin  admin   237B Oct 26 16:36 slowCat.b2abee0da6d507abb56a.bundle.js

It works great!

But when I rename this one:

diff --git a/14-dynamic-imports/src/main.js b/14-dynamic-imports/src/main.js
index f3d8a9e..a20714a 100644
--- a/14-dynamic-imports/src/main.js
+++ b/14-dynamic-imports/src/main.js
@@ -9,7 +9,7 @@ import(/* webpackChunkName: "showCats" */ 'showCats')
   })
   .catch(error => 'An error occurred while loading the component');

-import(/* webpackChunkName: "cats" */ 'cats')
+import(/* webpackChunkName: "differentName" */ 'cats')
   .then(({ default: cats }) => {
     const p = document.createElement('p');
     p.innerHTML = `There are ${cats.length} cats.`;

$ rm -f build/* && npm run build && ls -lah build/

> [email protected] build
> NODE_ENV=production ./node_modules/.bin/webpack --config=./config/webpack.config.js

(node:85562) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(Use `node --trace-deprecation ...` to show where the warning was created)
asset main.ae6abdf350d4035c8afc.bundle.js 3.53 KiB [emitted] [immutable] [minimized] (name: main)
asset showCats.ae6abdf350d4035c8afc.bundle.js 450 bytes [emitted] [immutable] [minimized] (name: showCats)
asset slowCat.ae6abdf350d4035c8afc.bundle.js 237 bytes [emitted] [immutable] [minimized] (name: slowCat)
asset cats.ae6abdf350d4035c8afc.bundle.js 190 bytes [emitted] [immutable] [minimized] (name: cats)
runtime modules 7.91 KiB 11 modules
cacheable modules 1.78 KiB
  ./src/main.js 1010 bytes [built] [code generated]
  ./src/showCats.js 533 bytes [built] [code generated]
  ./src/cats.js 109 bytes [built] [code generated]
  ./src/slowCat.js 171 bytes [built] [code generated]
webpack 5.44.0 compiled successfully in 452 ms
total 32
drwxr-xr-x  6 admin  admin   192B Oct 26 16:36 .
drwxr-xr-x  9 admin  admin   288B Oct 26 16:32 ..
-rw-r--r--  1 admin  admin   190B Oct 26 16:36 cats.ae6abdf350d4035c8afc.bundle.js
-rw-r--r--  1 admin  admin   3.5K Oct 26 16:36 main.ae6abdf350d4035c8afc.bundle.js
-rw-r--r--  1 admin  admin   450B Oct 26 16:36 showCats.ae6abdf350d4035c8afc.bundle.js
-rw-r--r--  1 admin  admin   237B Oct 26 16:36 slowCat.ae6abdf350d4035c8afc.bundle.js

No good :(

Any ideas?

davidjoy / webpack-5-examples Goto Github PK

webpack-5-examples's Introduction

Hey there 👋

📌 Pinned Repos

📖 Public Repos

webpack-5-examples's People

Contributors

Stargazers

Watchers

Forkers

webpack-5-examples's Issues

renaming some dynamic imports doesnt work

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent