We will build a simple webpack project that can be full customized to your choosing, but for this case it is for a react project.
What is Webpack?
Webpack is a module bundler. Webpack can take care of bundling alongside a separate task runner. React, and Hot Module Replacement (HMR) helped to popularize webpack and led to its usage in other environments, such as Ruby on Rails. Despite its name, webpack is not limited to the web alone. It can bundle with other targets as well, as discussed in the Build Targets chapter.
We will retrieve data via the star wars api. We will have 7 components.
PeopleList — -List of PeopleItem
StarshipList — List of StarshipItem
PlanetList — List of PlanetItem
PeopleItem — Each individual person
StarshipItem — Each individual starship.
PlanetItem — Each individual planet.
Nav — The navigation bar, that will be responsible for routing.
We will first create a directory, then go to it, and then install your devDependencies.
webpack — a module bundler, can bundle any asset or resource.
webpack-cli — Provides a flexible set of commands run your bundler.
webpack-dev-server — Uses webpack with a development server for live reloading.
@babel/core — Enables all configurations for your babel compiler.
@babel/preset-env — Compiles es6 code into es5.
html-webpack-plugin — Creates a html file that serves your webpack bundle. Can let it generate a html file for you or can use lodash template. In this case we will generate a html file.
css-loader — Loads file with style-loader, compiles @import and url like import/require.
style-loader — Inject as style tag.
Then we will install our dependencies.
react — Enables the user of react library.
react-dom — Enables rendering our app component on our root id in our html file.
react-router-dom — Enables your routing for your app.
history — Enables history for your navigation of your route.
npm init -y #Create your package.json with your default options.
#npm i -D for installing your devDependencies.
npm i -D webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin css-loader style-loader
#npm i -S for install your dependencies
npm i -S react react-dom react-router-dom history
We will create a .babelrc, and webpack.config.js file within our root directory.
webpack.config.js — configures your webpack bundler.
touch .babelrc webpack.config.js
Now we will create a src and dist directory, and within your src directory we will have a styles and components folder.
mkdir src dist
#Go into your src directory, and create a styles and components folder.
mkdir components styles
touch index.js index.html
We will first configure our package.json, we will add a start and build script. When building your webpack bundle, you will have a start script with a — mode indicating if it is development, or production. Then in the case of development we would add the — watch flag to watch the package.json.
Our start script is for our development server, and our build script is our production server.
In our webpack.config.js we will first import the modules we need. We will first import your path, which will join your app directory path with the src directory. Then we will import your html-webpack-plugin for initiating your bundle in a html file. Which would be set to the plugins property of the object you are exporting.
Define the object your will exporting from your configuration file. It will contain 4 properties.
entry — It would be where your ReactDOM will be initialized.
output — It would be where your distribution files would be in. It will contain a filename, and path property. The filename is the name of the file which all your files would be bundled in which would be index.bundle.js. Then path is where your bundled files would be in, which would be the dist folder.
module — It would contain a rules array which would contain object that each one will have at least a test property(the regex pattern to which files would be loaded), and loader(the loader or loaders that will load your files based on test property).
plugin — It would be where you initiate any plugins for you webpack configuration. In which we would use html-template-plugin to create a file which would reference index.bundle.js.
Now define your .babelrc which will hold your configuration for your babel compiler. We would only define our presets property with our preset-env and preset-react module.
Now we will go to our index.html file in our src folder.
Define your index.js which would be where entry point of the virtual dom would be configured. We will retrieve the App component from the ./components/App which has not be defined yet. Then import React, and the render method from react-dom that will render your App component in your virtual dom, which will be set to element with a id of root.
Now lets create your App component which would be set to your app. Create a App.js file in your components folder. And a App.css file in your styles folder.
mkdir presentational container
You app component will have just a div, and another div which will hold your content. We will use PureComponent instead of Component to perform a shallow comparison of props and state.
Now define the styles for your App component.
Now run npm start, it should bundle your file. Your dist directory should look like this.
But we would like our app to hot reload, so in our package.json. Let’s just replace the start script with a webpack-dev-server — mode development, then to have it open via -open flag, so your app opens when your dev server starts and a -hot flag to indicate it is hot reloading.
We will first define our list component, and styles. We will create a PeopleList.js, StarshipList.js, and PlanetList.js file. Instead of making styles for each component, we will just create a List.css for all of our list styles. (NOTE: Our routes would be set to each of these components.
touch PeopleList.js StarshipList.js PlanetList.js
In each of our List components, we will have a div and inner div, and have your elements loop through it. We would have a data array in our state. In our componentDidMount we would fetch data, with a options object specifying our ajax call is a get method.
So for our PeopleList component we will retrieve data using the componentDidMount method, and using es6 fetch api. In our fetch api we will pass a option with a method property set to GET indicating it is a get request. We will conditionally render the data array from state that will be set to the data of the response.
Now follow the same pattern for your PlanetList and Starship component, with their respective endpoint.
Here is swapi if you want to play with the api.
Now we will import each component to the App.js to see if the ajax requests are successful.
Here is the PeopleList
Here is the StarshipList
Here is the PlanetList
Great we will configure our Routes.
Now let’s define our routes, we will create a Routes.js file which will hold our routes in the root of our src directory.
In our Routes.js file, we will import the Switch and Route component. The Switch component will go to the first component that matches the intended route. Our routes will be / which would be using the exact keyword. Then would /people, /planet, and /starship for intended list components.
We will create a Home component for our home route (/).
Here are Routes.js file.
Now we will go configure our Router in our index.js file in within our src folder. We will be using BrowserRouter and alias as R when we import it, and nest our App component.
Now define our Navbar component to navigate to each page, it will be in our presentational folder, and the function used to navigate to the route will be passed down from the App component.
Update styles for navbar and title for each route in the app.css.
Finally import the withRouter from react-router-dom, Routes, and Navbar component to the App.js file, and bind the navigate function in the constructor of the class.
Now the navigation bar should route each page.
The home page.
The people list page.
The planets list page.
The star ship list page.
This is a very basic setup of a webpack project. Use this as a starting point, add a route for each person, planet and star ship.
Here is the github repository as a reference:
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…