React Course Notes : The Webpack Config File

20181008

Instead of looking for a file called app.js, I want to look for a file called app.jsx. And by default web package doesn’t know what to do with the jsx file.

entry:'./public/app.jsx'

If I run web package from the terminal after saving my config file, you can see I am getting some strange errors.

Long story short webpack is complaining about an unexpected token it sees when we I to open the <div> inside of jsx. It’s not standard javascript and it doesn’t know how to handle it.

In order to do this you can see they even suggest using a loader to handle this file type. Use a Babel loader to convert all of jsx files into ES5 code that I can use

  • The first step in that process is to add loader into the modules

module:{
loaders:[
{
loader:'babel-loader',
query:{
presets:['react','es2015']
}
}
]
}
};

Long story short I am telling the Babel loader to take our files parse them through react get the output and then run them through es2015 as well.

  • I am going to specify a test actually which is going to be equal to a regular expression matching any file that has a .jsx extension

text:/.jsx?$/,

  • The next thing I can do after little regular expression is to specify which folders I don’t want to have parsed

exclude:/(node_modules|bower_components)/

  • So once your file looks like this you’re ready to head into app.jsx for one final change. I am going to do that the same way I did it in app.js where I used the required keyword

So I removed my script tags from index.html file and that means the react variable currently isn’t available in app.jsx.

Remember when I were using webpack every file is treated as its own island. That means if I want to use something like react I can assume it’s available globally I have to import it explicitly.

  • So I’m going to create a reactive variable set it equal to require. And in this case since I installed the module via NPM I can simply type the name out and I am going to do the same thing for reactDom. Since I also use that in this file and I removed its script tag.
    var React = require{'react'};
    var ReactDOM = require('react-dom');
  • With this in place my app.jsx file is ready to go from the terminal. I’m going to go ahead and run a web pack.

You can see that web package did quite a few things.

It found bundle.js and it found one hundred and fifty nine hidden modules. This is because as I include react and react Dom all of its dependencies come along as well.

Bundler took all of that stuff and dumped it into one js.file and that means if I run node server from the terminal I should be able to head over to my browser and see the original app I created.

So what I’ve done here is I’ve removed the dependencies inside of index.html and I now compile

my application before I ever start the server. so the bundle file is ready to go. This is a much more realistic setup for a production react app and I am almost done.

Let’s take a quick moment to recap what I did

  • The first thingI did is changed at the end to report that webpack looks for before it was loading in app.js. Now I am telling it to load in my little react app which is an app.jsx.

entry:'./public/app.jsx'

  • Since there is jsx code in that file, what package doesn’t know what to do by default. So I have to use webpack calls loaders in this case. I only need one loader Babel loader and Babel by itself. Even if I don’t use it with webpack. it requires presets tells Babel what to do. And this case I am telling it to compile my code for react and es2015.

module:{
loaders:[
{
loader:'babel-loader',
query:{
presets:['react','es2015']
}
}
]
}
};

  • The next thing I do is tell it which files I want to apply this loader to and this case I’ve decided to select every file that has a .jsx extension

text:/.jsx?$/,

  • And last but not least I exclude the node modules folder and the bower components folder. Since I don’t care about the files that are in there.

exclude:/(node_modules|bower_components)/

  • And lastly in app.jsx I now have to start requiring the dependencies that my file needs. Since I’ve removed the script tags the global variables no longer exist and I have to use the required keyword available by webpack in order to load in the modules.

var React = require{'react'};
var ReactDOM = require('react-dom');