React Course Notes : Generating Bundle

20181004

My application uses JSX and ES6 so I need to switch how I run a Webpack. Instead of running a web pack from the terminal and giving it an input and output file. I need to specify a config file where I can pass in various plugins like Babel.

  • So in order to do this I have to make a new file right inside of ReactBadu in the root of the project and it needs to be called webpack.config.js

The name here is important and all this file does is it exports an object and that object lets me configure what webpack does.

  • So starting things off : A simple module.exports equals an object
  • And now I am just going to specify a few properties

entry : This tells webpack where it should start processing my code.

In this case my entry like I have over here in the terminal is the public/app.js file.

entry:'./public/app.js'

output : Right now my output is in public/bundle.js and I am going to keep that the same.

I need to set it equal to an object and on that object I want to set two properties.

  • First up is the path to the folder. And inside of JS I can use a dirname and that gives me the path to the current folder.
  • From that folder I can specify the file name ./public/bundle.js

output:{
path: __dirname,
filename:'./public/bundle.js'
}

  • There’s just one more action to add resolve : resolve is going to take an extensions

Extensions are going to be a list of file extensions that I want to be able to process.

resolve:{
extensions:[]
}

So for example, in here I require a JS file but I am able to leave off the JS extension.

  • I can tell if I want to find ones with no extension or find files that have a js extension.

resolve:{
extensions:['','.js','jsx']
}

  • Now run Webpack

And here you can see it found my public app.js file. It found one hidden module and that hidden module is components greeter.js; Remember it grabs everything and puts it in bundle. And lastly it dumps all of this into public bundle.js.

  • If I run from the terminal node server js and fire up the server I can head into my browser
  • Go to local host of 3000 and you can see from a greeter function it still prints to the screen and this is awesome

I were able to simplify the command in terminal. I have to run in order to generate bundle file using the config.

Now all I’ve done so far is taken in the existing functionality. I’ve moved it into the config file and by running webpack. Webpack was automatically able to find the webpack.config file because it has a special name.

It could go through the files and I could find the entry point the output and all of the various extensions I want to support.