Let's start by creating the structure of our new project.
After all, the commands above we will get this structure:
Let's init our new project.
By giving in -y flag you telling npm that it should take all default values.
For testing our initial structure let's add "console.log('Hello World!)" to src/index.js.
Now you can run your app by "node src/index.js" and in the console, you will see "Hello World!" message.
Next, move our running script to package.json. It allow us to run our app more conveniently and that's the place where all your project's scripts (start, test, deploy) will end up eventually. Let's run our app again but at this time using npm start.
I tried to show what Webpack does on the picture in simple way.
Now we can install webpack with all needed dependencies and start to configure it.
--save-dev - key which tells that these packages should not be included in the production bundle. It keeps your production code lightweight.
Let's init our dist/index.html before we start to configure webpack.
Let's create the config file for webpack.
Add this config to webpack.config.js .
Now you can run.
Open /dist/index.html file in the browser and check the output of index.js in the console. You can note that you can't debug your index.js file. To fix this you should add this line to webpack.config.js which tell Webpack to create source map file for bundle.js
Now you can rerun webpack --config webpack.config.js and try to debug your index.js file.
You can realize that after changing code in index.js you should refresh the page. To make our life easier let's implement live reloading and tiny server to serve our files. Let's change our start script in package.json
Webpack-dev-server - we use it for live reloading and tiny server which serve our files from /dist folder.
Now you can run npm start and open your browser to see results. You can find the path in the console:
You should see the output from /dist/index.html file in the browser and logging from /src/index.js in the console. Try to change code in /src/index.js to see how live reloading works.
You can see how Babel makes our life easier by allowing writing code as in the first example ;).
Let's install Babel and start playing with it.
Let's configure our package.json file and connect Babel to our app.
Next, we can install babel-loader which will be used to connect babel and webpack.
Let's say Webpack how to use Babel. Open webpack.config.js and add this lines:
We said Webpack on which files (all .js files) it should use babel-loader and which folders should be excluded (node_modules/ folder) from the process.
To connect React and Babel let's change our package.json file:
Let's tell Webpack about .jsx files. Open webpack.config.js file and do changes.
Let's install React and react-dom
Let's add the entry point for our React app in dist/index.html.
In src/index.js you can implement the first React App.
Now you can open the browser and see results.
Let's check how to live reloading works. Create /src/components/App.js file and add this code:
Now you can open the browser and see updates without refreshing the page. Let's tell Webpack what to do with .css files. We need to install css-loader and style-loader.
That's it. We just created a React app with Webpack and Babel.