I had been using webpack for more than a few months. The pain of using webpack was that everytime when I need to setup, I need to read through the documents and my old source again and again.
Disclaimer: Webpack is amazing tool when you want to make some sophisticated setup, but for beginner, webpack is way too overwhelming to get started. I would recommend using parcel to get started learning about javascript front end library or framework.
parcel-bundler
Below are my sample source code to setup my webpack workflow.
Sample of webpack config file
What if I tell you, this is no longer a pain when you use Parcel. Parcel is easy way to setup your Web App Work flow.
In this tutorial, I will be using React app as an example to show how easy it is to setup with parcel.
Intermediate
According to the Parcel team, they said that Parcel is Blazing fast, zero configuration web application bundler.
I would say it is the easiest way to get started for a bundler instead of using complicated library like webpack.
When I use webpack, Hot Module Reload was a bit tricky to setup, and making css work also required some research. This lead to the next section, why parcel.
The project is initialize by installing all the required library.
npm initnpm install react react-domnpm install --save-dev parcel-bundlernpm install --save-dev babel-preset-reactcreate a file call .babelrc, and the setup we use is the easiest way to get started.
{
"presets": ["react-app"]
}
The final file structure look like this.
/
|- node_modules/
|- .babelrc
|- index.html
|- package-lock.json
|- package.json
|- src/
|- index.js
Create an index.html, setup a div with id of "app", then attach the js file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React with Parcel</title>
</head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
</body>
</html>
Create src/index.js file, where you start using the React App.
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello Parcel and React</h1>,
document.querySelector('#app')
);
package.jsonIn package.json file, add 2 lines of codes into scripts to be use
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
To start a development server, simply just run npm run start.
The server serves at localhost:1234
To start a production file, simply just run npm run build, and it will generate a dist file that contains all the necessary file to use in production. Parcel automatically minified your file which is ready to be use in production.
Isn't parcel much easier than webpack? No more spending time reading docs on which webpack plugin to attach to do css, or any other things.
With this setup, basically you have done all it needs to start a project. You can use CSS, Hot Module Reload, Minified JS and CSS in production, Babel setup which can transpile React into JS that can be understand by browser.
With this setup, basically you have done all it needs to start a project. You can use CSS, Hot Module Reload, Minified JS and CSS in production, Babel setup which can transpile React into JS that can be understand by browser.
With this setup, basically you have done all it needs to start a project. You can use CSS, Hot Module Reload, Minified JS and CSS in production, Babel setup which can transpile React into JS that can be understand by browser.