React Webpack initial build and runtime

Question

I'm new to React and I'm still trying to understand how things are put together. In webpack, I understand that we have to run the webpack command initially and it will generate the index.js file where we output it in the config. For my questions:

What role does this file play in runtime?
Everytime i do an npm start, does it automatically update my index.js file?

Here is my webpack.config:

var config = {
   entry: './main.js',

   output: {
      path: __dirname,
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

With or without initially running webpack command my code still runs, reason for me being confused as to what it really does, because even without having the index.js in my directory I'm still able to run my code

how does your package.json look?

Pete Houston
– Pete Houston

2017-03-26 10:06:47 +00:00
Commented Mar 26, 2017 at 10:06 — Pete Houston
– Pete Houston, Commented Mar 26, 2017 at 10:06

js_248 · Accepted Answer · 2017-03-26 11:53:02Z

Why we are using webpack:
When we run webpack command it will create a single index.js file in given the location.Our browser understands only vanilla html, css and javascript.But with react you are probably going to use jsx or es6. So we need to transform these to what browser understands.
According to your webpack.config , webpack is going to convert all jsx file into .js file (using bable loader)and bundle it to a single file as index.js.

Role plays by index.js:
You will be having an index.html file in your app directory.webpack automatically load index.js file to body of index.html file.This if final index.js file browser is going to use.
If you are using following configuration in package.json

{
  "scripts": {
    "dev": "webpack -d --watch",
    "build" : "webpack -p"
  },

}

then webpack keeps watching any changes in .jsx file and update index.js

As you are saying you code is running without webpack.It means you are using simple .js file.But to use es6 or .jsx you need webpack.
Hope it helps!. For more you can read https://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app/

Collectives™ on Stack Overflow

React Webpack initial build and runtime

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related