Im using webpack to generate a bundle file, namely app.bundle.js. It seems to be the case that in each seperate js file I need to import the modules it will use.
I've been trying to wrap my head around this but it eludes me hard. The way i understand the bundling process is, put simplified: it takes all the files you've specified and merges them into one big output file.
That should mean that a class is declared ONCE in that big file and that should be enough to serve as a reference for all the others. Why do i need to import it again and again and again when it should simply just be there at the top of the bundle file being availabe for every other piece of code written thereafter?
P.S ( A simple example )
I've got the following files:
A.js
class A {
doIt(){
console.log(this);
}
}
B.js:
import {A} from "a.js";
class B extends A {
}
main.js:
import {A} from "a.js"
import {B} from "b.js"
To use B in main.js i NEED to import A as well. And if A had another subclass i'd need to import that too. This, to me, looks insane, to the point that i'd prefer to afix everything on window.
If anyone knows, please help me understand what im missing.
- Webpack takes all the files you've specified and merges them into one big output file to pull in the dependant Modules at the right time, in the correct scope.
so if we have:
// sum.js
var sum = function (a, b) {
return a + b;};
// multiply.js
// slightly contrived here - we're going to repeatedly sum to multiply, to illustrate dependency
// interaction
var multiply = function (a, b) {
var total = 0;
for (var i = 0; i < b; i++) {
total = sum(a, total);
}
return total;
};
// index.js
- our application logic
var totalMultiply = multiply(5, 3);
var totalSum = sum(5, 3);
console.log('Product of 5 and 3 = ' + totalMultiply);
console.log('Sum of 5 and 3 = ' + totalSum);
// index.html
- our entry point to our application
<html>
<head>
<script src="src/sum.js"></script>
<script src="src/multiply.js"></script>
<script src="src/index.js"></script>
</head>
</html>
the output of this would be:
Product of 5 and 3 = 15
index.js:17 Sum of 5 and 3 = 8
- If we get the order wrong in index.html our application won't work.If index.js is included before either of the other dependencies,or if sum.js is included after multiply.js we will get errors. That is the point from the bundle file.
- Webpack can pull all of our dependencies into a single file
bundle file,meaning that only one dependency would need to be downloaded.
2- Making Dependencies Available, And Linking Them
- CommonJS uses module.exports to export - or make available - functions or variables to other code. It uses require to then pull in these exported values.
// sum.js
var sum = function (a, b) {
return a + b;
};
module.exports = sum;
// multiply.js
var sum = require('./sum');
var multiply = function (a, b) {
var total = 0;
for (var i = 0; i < b; i++) {
total = sum(a, total);
}
return total;
};
module.exports = multiply;
// index.js
- our application logic
var multiply = require('./multiply');
var sum = require('./sum');
var totalMultiply = multiply(5, 3);
var totalSum = sum(5, 3);
console.log('Product of 5 and 3 = ' + totalMultiply);
console.log('Sum of 5 and 3 = ' + totalSum);
- Notice that we've made both sum and multiply available to other code and we've pulled in these exported functions in both multiple.js and index.js.
- Notice too that our index.html now only needs to pull in a single file - bundle.js.
- We can expose what we want and keep other code effectively private
that is the whole point, you need to tell webpack which modules you need them to communicate and share data with each other. As in webpack Each module has a smaller surface area than a full program, making verification, debugging, and testing trivial. Well-written modules provide solid abstractions and encapsulation boundaries, so that each module has a coherent design and a clear purpose within the overall application.
- We also reduce web calls from 3 (sum.js, multiply.js and index.js) to
a single call - this will help speed loading times.
Notice i wouldn't recommend exposing libraries or modules as global unless you really do need it, i.e. the point of a module system is to explicitly declare dependencies.
- ProvidePlugin: This plugin makes a module available as a variable in every module. The module is required only if you use the variable.
Example: Make $ and jQuery available in every module without writing require("jquery").
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
So:
// app.js
$.ajax(...);
Is effectively transpiled into:
// app.js
require('jquery').ajax(...);
webpack will generate a code of loading of the specified module the same as it it does it for import or require.
- further read: Webpack ProvidePlugin: how not to write the import/require sheet at the beginning of module javascript
