Understanding webpack modules

The whole Javascript bundling process has passed me by really (or rather I have avoided it). I'm sure its something simple, but given a resources/js/cornerstone.js file containing

import cornerstone from 'cornerstone-core';
import cornerstoneMath from 'cornerstone-math';
import cornerstoneTools from 'cornerstone-tools';
import Hammer from 'hammerjs';

cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;

cornerstoneTools.init();

and then a webpack.mix.js file containing

mix.js('resources/js/cornerstone.js', 'public/js');

when I run npx mix, a cornerstone.js file is created in the public/js folder and is loaded by the browser

But in the code and in the console, cornerstone is undefined.

What am I missing?

Sinnbeck

3 years ago

Best Answer

Level 102

One of the big things that took me a while to understand back in the day is that webpack (and other bundlers/processors) does not expose anything. They expect you to import what you need in each file that is build, and it will build the structure for you. But that does not mean that anything goes outside of webpack. So you cannot access anything from inside the compiled js file from the outside.

This is the reason why you will often see examples that use window. This exposes functions or similar to the global scope.

window.cornerstone = cornerstone

After this you can now access cornerstone on the console or in your inline code.

Here is an example of alpine.js doing it :) https://alpinejs.dev/essentials/installation#as-a-module

Snapey

3 years ago

Level 122

Thanks I knew it was a scope issue somewhere but between import and export I couldn't really fathom what was needed

Ironically (linked to your answer), I'm trying to access cornerstone inside an alpine x-data scope !

Sinnbeck

3 years ago

Level 102

@Snapey Yeah its quite confusing. But yeah its a self-contained "module" that has no knowledge of the outside.

Please or to participate in this conversation.