webpack v1 from Kent
Intro to Webpack
Webpack is a module bundler that bundles javascript and other assets for the browser. It works really well for applications and javascript libraries and is very simple frontend build tool.
[00:03] To use webpack you need to npm install the Webpack module. You need to create a new file, webpack.config.js. Webpack will expect that this file exports the config and the config is very big and very customizable. But we're going to use a simple case here.
[00:25] We'll say module.exports is an object. You need to tell Webpack the start of your application, so the entry file, and the output file. We'll say entry is our index.js, and output is an object where the file name will be bundle.js and the path will be dirname. We can actually run this right now. It'll work fine. But our application isn't built to use Webpack right now.
[01:00] Let's just describe our application here really quick. We have this nice little background image. We have a couple of buttons here that have an event handler added to them via JavaScript. Then we have this DOM binding stuff. Which is another JavaScript file.
[01:24] All of this is brought in via script tags in our HTML, and we're also using lodash as a third party. What we want to do is we want to replace all of these script tags with a single script tag which will be bundle.js, so the output of our webpack, and we'll take all of these out.
[01:45] Then in our index.js, we're actually referencing these as globals. Here alert-buttons.js is global for alert buttons, and then the lame-dome-bindings.js is for this one. Instead we want to use a common.js syntax to require these where they're needed.
[02:07] Webpack is actually very powerful and it understands common.js, also AMD, ES6, and even globals. You have a lot of power there. But we're going to use common.js.
[02:22] First I'm just going to go based off of what we have here. Without changing anything, if I type webpack, it's going to run our config. We've configured it to output a bundle.js with the entry of index.js.
[02:37] If we look at our bundle, we'll see there's some webpack here for the monitor loading. Then it's just the, all of our modules. Because we only have this one entry and it's not actually requiring anything, there were no dependencies to resolve and so it just stuck in our, the contents of our file, and then it was done. We want to actually start to require things as needed.
[03:04] The first thing that you'll notice is it's wrapped in a function, so we no longer need the immediately invoked function, so we can take that out. Then we're going to say var AlertButtons is require alert-buttons. We'll do the same for the LameDomBinding.
[03:24] Now we're not depending on those as globals, but they're not exporting themselves as common js modules or any modules whatsoever. Let's go ahead and export those. We'll say module.exports for this one, and for this one as well.
[03:40] OK. If I run webpack, and we'll run webpack with a --watch, and I refresh here. Now it should be working but it's not, so let's look at what the problem is. Ah, reference error. _ not defined. You need to make sure that you're requiring everywhere because we're no longer depending on globals.
[03:59] The specific problem isn't in our alert buttons. We're depending on the global underscore. But because we're not actually sticking that script on the page anymore, we need to require that. We'll say _ is lodash. It works as common js so it's going to look up in our known modules for lodash. Now if I refresh, everything should work as expected. No errors in the console. Sweet. That's an intro to Webpack.