Splitting files using webpack?

1

I am working on the MDN Javascript Objects tutorial call ‘ball game’. I wanted to try getting the final part of the ‘balls game’ to work with webpack. I have been at this since yesterday night and made 3 different exhaustive attempts to split the code into different files and make it work.

Here is a github repo with the code https://github.com/tomcatfever/balls.

I just want to draw a single ball, anywhere on the screen. Right now, I get an error on line 66 of the bundle.js file.

Here is a link to the MDN tutorial: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_building_practice

2

How are you wanting to split these files? Also, why?

3

Anyway at all and then combining using webpack. Why? To learn how.

4

As-is, your webpack configuration already combines both main.js and ball.js into bundle.js. No other steps are required to combine them. When a person wants to “split” files in compilation, they usually want to have certain parts of their app grouped together to make updating and downloading easier. For instance, if you were to use React in your app, you don’t need that in your bundle.js file and can let the client download it from a CDN and cached by the client. You can have webpack compile just the code you wrote, leaving React out and keeping your own code small. In your case, there is nothing else to split. You can either compile your JavaScript into two separate files, or have webpack merge them as it is now.

5

I am aware. As stated above, bundle.js file only produces errors. I cannot seem access any of the classes, functions or variables in a useful way.

I cannot get one file to work with the other no matter what I try. When I have more code and more files, I cannot image things will be different with a larger number of files and code.

I want to know what specifically I am doing wrong here to learn from this mistake.

After trying to understand what I’m doing wrong for so long, I thought I would try asking for help.

I can post a live version of this nonfunctional webapp to surge.sh if you think that would help facilitate an answer.

6

No need, I can clone your repo from Github.

The mistake was using the wrong import syntax for your export in ball.js.

Replace:

//main.js
const ball = require('./ball');

with

//main.js
import Ball from './ball'

Also replace

//ball.js
var testBall = new Ball();

export default testBall;

with

//ball.js
export default Ball;

It’s technically possible to mix the ES6 import/export syntax with the requirejs syntax, it’s not recommended.

7

Making these changes doesn’t make a material difference. From the developer console, I cannot access Ball nor can I access __WEBPACK_IMPORTED_MODULE_0__ball__.

All I get it the same error: Uncaught reference error undefined.

Although this way it doesn’t point to any line in bundle.js as a specific error.

8

You’re not meant to access modularized code from the console. One of the stated goals of modularization is to encapsulate code in such a way that it doesn’t contaminate the global scope.

10

When you require or import a module into your script, you have access to it from within that script. If you make the modifications from above, you’ll be able to use the Ball constructor in main.js.

11

If I try var test = new Ball(); I get an undefined error. This seems at odds with the whole point of using imports and bundling files together.

12

wait… i think i get it. i have to call each constructor and function into a new variable in the main.js like this:

import Ball from './ball';

var theBall = new Ball();

var drawBall = theBall.draw();

document.write("<h1>SUCCESS?</h1>"+drawBall)
13

That’s it exactly, though you don’t need to concatenate drawBall in your document.write call.

14

I know. I put it there to see if it would print undefined into the browser. It does.