Skip to content
Snippets Groups Projects
Commit 31ad2b9b authored by Olivier ABDELNOUR's avatar Olivier ABDELNOUR
Browse files

wip

parent 757bc03a
Branches
No related tags found
No related merge requests found
Pipeline #60112 passed with warnings
...@@ -6,3 +6,120 @@ tag: ...@@ -6,3 +6,120 @@ tag:
- modules - modules
- webpack - webpack
--- ---
# The _bundle_
> _Webpack_ bundles everything imported in the entrypoint.
If you look at `dist/main.js` content, you will notice that **the code corresponding to `welcome.js`, `game.js` and `score.js` is missing** because these files are still imported with a `<script>` tag in `index.html` rather than an `import` statement in `main.js`, so _Webpack_ has just ignored them.
Earlier in this chapter, we turned `router.js` into an _ES module_. It's time to do the same for all the aforementioned `*.js` files.
After this chapter, thanks to the _ES modules_, there will be no more imported files in the `index.html`.
**ES `import` statements will be the glue between files**. With the _bundler_, the importing file responsibility have shifted from _HTML_ to _JS_ files.
=== "before bundler"
![not-bundle](../../assets/not-bundle.png)
=== "after bundler"
![bundle](../../assets/bundle.png)
## :fontawesome-brands-js: **Bundle the JS** code <span id="diy">:fontawesome-solid-wrench: Do it yourself</span> <span id="hard">:fontawesome-solid-star: :fontawesome-solid-star: :fontawesome-solid-star: Hard</span>
- Edit `utils.js`. Look at the `TODO #export-functions` comments for instructions.
- Write an `export` statement to export the `parseUrl` function.
??? note "Show the utils.js file"
=== "utils.js"
```js linenums="1"
export function parseUrl() {
// ...
}
```
- Edit `welcome.js`, `game.js` and `score.js`. Look at the `TODO #export-functions` comments for instructions.
- Remove the _IIFE_
- Write an `export` statement to export the component's function.
- Write an `import` statement to import the `parseUrl` function if required.
??? note "Show the resulting files"
- Edit `main.js`. Look at `TODO #import-components` for instructions.
- Write an `import` statement to import `WelcomeComponent`, `GameComponent` and `ScoreComponent`
??? note "Show the main.js file"
=== "main.js"
```js linenums="1"
import { Router } from "./app/scripts/router";
import { WelcomeComponent } from "./app/scripts/welcome";
import { GameComponent } from "./app/scripts/game";
import { ScoreComponent } from "./app/scripts/score";
const outlet = document.querySelector("#content-outlet");
const router = new Router(outlet);
router.register("", {
component: WelcomeComponent,
templateUrl: "/src/app/views/welcome.html",
});
// ...
```
- Edit `index.html`. Remove all `<script>` tag as everything is now bundled by _Webpack_.
??? note "Show the index.html file"
=== "index.html"
```html linenums="1"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MÈME ory</title>
<!-- TODO #import-css: move style imports to src/main.js -->
<!-- TODO #npm-bootstrap: change css location to '/node_modules/bootstrap/dist/css/bootstrap.css' -->
<link rel="stylesheet" href="/src/app/styles/bootstrap.css" />
<link rel="stylesheet" href="/src/app/styles/style.css" />
</head>
<body>
<div id="content-outlet" class="h-100 w-100 d-flex flex-column"></div>
</body>
</html>
```
- Test the application: navigate to [http://localhost:8080](http://localhost:8080), the application should work as usual and show no error in the console 🎉.
- Build the application.
??? note "Show the build command"
```bash linenums="1"
npm run build
```
#### :fontawesome-solid-folder-tree: Modified files
```
src/app/scripts/game.js
src/app/scripts/score.js
src/app/scripts/utils.js
src/app/scripts/welcome.js
src/main.js
src/index.html
```
#### :fontawesome-solid-list-check: Checklist
- <input type="checkbox" /> I know how to use the `import` keyword and do **named imports**.
- <input type="checkbox" /> The codebase has no unresolved `TODO #export-functions` comments left.
- <input type="checkbox" /> The codebase has no unresolved `TODO #import-components` comments left.
- <input type="checkbox" /> The codebase has no _IIFE_ left.
!!! question "Question"
Look at the `dist/main.js` file, generated by the build command. What is its size?
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment