Now that we have a shell for our node modules, we will set up tooling to bundle and serve our JavaScript. This will make things easier for us as our app grows in size and complexity. We will turn to webpack
to help us with this!
At a high level webpack … (ahem) “packages” all your JavaScript code and assets into bundles.
webpack - TL;DR
webpack and its cli tool come as a npm packages. Install them as development dependencies like this:
$ npm install webpack webpack-cli --save-dev
There should now be a ton of node packages in the local node_modules
directory.😍
Remember that webpack wants to bundle your assets and then put that bundle somewhere. To do that it needs to know where to look to start bundling and where to drop the payload when it is done. We tell webpack where to start by defining entry and output points. We will be specific and define them with a new file named webpack.config.js
:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
webpack will look in the src
directory for an index.js
to build its big dependency graph and do its bundling. This also tells webpack to put the resulting bundled payload into dist/main.js
.
Create a new directory named src
and add a JavaScript file named index.js
:
function helloWorld() {
let element = document.createElement('div');
element.innerHTML = 'Hello world!';
return element;
}
document.body.appendChild(helloWorld());
Create a new directory dist
and add a new HTML Document there named index.html
. Add to it the following HTML:
<!doctype html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
We’re ready to let webpack do its thing. Type: npx webpack
.
$ npx webpack
Hash: bfd0e898782088551b28
Version: webpack 4.29.0
Time: 69ms
Built at: 01/25/2019 3:04:15 PM
Asset Size Chunks Chunk Names
main.js 1.02 KiB 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js 170 bytes {0} [built]
You should now have new file in dist
named main.js
.
We can take this a step further and add a build
script in package.json
to do this for us.
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
...
}
Now we can run this through npm run build
. This will be a convenience when we add flags to the webpack calls.
Open dist/index.html
in your browser and you should see something like this:
Hey now! 😵
Now is a good time to ask “But why are we doing this?”. We’re using webpack because manually compiling, obfuscating, compressing and bundling all our JavaScript assets is a ton of work. webpack makes this a snap. Feel free to do that by hand, though. 😎