Configure Webpack 2 and Babel for use with Preact
In this lesson we will create a ‘webpack.config.js’ file from scratch. Along the way we’ll learn about the entry point, how to specify output, how to configure loaders, the Preact-specific parts of the Babel configuration, and finally how to use the ‘webpack-dev-server’ via a script in the ‘package.json’ file
[00:00] We'll start by creating an empty file called webpack.cofig.js in the root of the project. We want to export an object so we can assign it to module.exports. The best way to think about a webpack configuration file is to break it into sections.
[00:18] We always need some input, some output, some transformations, a choice of source maps, and some server configuration. Now, we just need to fill in the gaps. For the input, we don't need to tell webpack about all of the files that we're going to use, we just need to give it the entry point to our application.
[00:42] Webpack will then trace the dependencies and then bring in everything it needs to. That's why webpack calls this the entry, and we'll just use a single string source. This will point to a directory in the root of our project which we can create now.
[01:01] We'll create directory src, and inside there, we create a file called index.js. webpack will load this by default. Webpack now sees this as the starting point of our application. When it runs, it will look at whatever we provided for entry, in this case, it's the path to a directory, and it will load index.js file by default.
[01:27] Now for the output, we need to specify the path and the file name separately. We'll see output and we'll give an object. We'll provide the path as the current directory plus build. Webpack will generate this directory for us, we don't have to do that.
[01:47] If you need this to work across platforms, you would have to bring in path module, remove the forward slash her, and call path.join. This will ensure the directory separator is correct on each operating system.
[02:06] Next, we need to actually name the final JavaScript file, we'll say filename, and we'll call it bundle.js. Now before we add our transformations, we can confirm that we have our entry and our output set correctly by running webpack.
[02:23] If we say nodemodules.bin/webpack, we can see that bundle.js was created from src/index.js, and you can see that it creates it a build directory, and we have a bundle.js. If we open it, you can see we have some webpack boilerplate.
[02:46] Scroll down just a bit, you can see the code that we added, index.js is now here. Next, we move on to the transformations. Here, we need to configure babel. Under the module key, we provide rules and then an object with the configuration for our loader.
[03:05] For test, we'll give a regular expression that will match any file ending in .js or .jsx. This is how webpack knows which files to process with this loader.
[03:19] Next, we actually just give the name of the loader under the loader key, and then we need to provide some options to it. We're using the env loader which will automatically give us the latest JavaScript features by default. Then, we added one additional plugin for transforming JSX.
[03:36] We pass the name of it here, along with any options that are specific to this plugin. This is the preact-specific part, because all of this configuration here would be pretty much the same across any project that uses babel.
[03:51] When it comes to transforming JSX, this plugin if you notice, is react-jsx. What does that mean? If we look at this snippet in our code, if we had a block of JSX like this, this plugin because it's the react plugin, would generate this code.
[04:12] But because we're using preact, we actually just need this. Everything about this is the same apart from this first section. That's what we are configuring here.
[04:25] Next, to configure source maps, we just use dev tool and source map, and finally for the server, we use the dev-server key, a content base is the src directory where our index.js lives.
[04:42] We say compress true to enable gzip compression, and history API fallback true, this will allow us to do some routing later on. Now, let's fire up the dev server to make sure everything's working. We'll add a script to our package.json file, we'll use start, and then we'll say webpack-dev-server inline. This will stop webpack from serving the application in an iframe.
[05:07] Next in the src directory, we'll need an HTML file, we'll call it index.html, insert some boilerplate, a script tag that points to bundle.js, then we can simple run yarn start.
[05:22] You see in the initial output we get this address. If we access this address in the browser, open up dev tools, you can see the index.js log that we added here, and if we go ahead and make a change to this, write to the browser, and you can see it works as expected.