What do you know about Webpack? If you don't have any idea what I am talking about then you are at the right place.
After reading this article, you'll know everything from what is a Webpack? to how to use Webpack for your own website.
before jumping on what is Webpack let's know Why you should need Webpack? Why it was created and How it can benefit you?
Let's get started.
Why do we need Webpack?
We need to go way back when the websites were only some HTML and CSS files along with a JavaScript file in some cases.
JavaScript was changing the whole dev community. Everyone was trying to improve the user and developer experience building web applications. Just then New JavaScript libraries and frameworks were introduced to make the work easier.
As the libraries and frameworks make the development easier and faster. Design patterns also evolved for developers to make the development of JavaScript applications more powerful and simple.
Websites were no more than some code files but later they started to get larger and bulkier files. When JavaScript Modules were introduced, it led the application's size from 3 files to 4x or 5x of files in the overall package.
This size of an application was a challenge along with the complexity of the code. Developers had to write the code that the browser would understand. Developers had to use the helper code called polyfill that is used to make sure that the browsers were able to interpret the code efficiently in their packages.
To solve this problem, developers needed a solution and that solution is WebPack.
What is a WebPack?
Webpack is a static module bundler that goes through your entire package and creates a dependency graph.
Webpack treats all files and assets of the package as modules so this dependency graph specifies how these modules relate to each other using the references that are: require and import statements between files.
Then depending on this dependency graph, Webpack creates a new package that consists of the minimum number of files required for the project. It can be a single bundle.js file that can be easily used for the application.
This bundle contains the code from all application modules combined in the correct order. It doesn't execute the code instead it just converts multiple modules and dependencies into a bundle. this bundle then can be inserted into the HTML files.
Webpack can be used to:
- helps you generate a bundle of application resources.
- checks for changes and re-runs the tasks.
- can transpile CoffeeScript code to JavaScript
- can run Babel transpilation to ES5, allowing you to use the latest JavaScript features without worrying about browser support.
- can split the output files into multiple files.
- convert inline images to data URIs.
- allows you to use require() for CSS files.
- allows you to perform tree shaking.
- allows to run a development webserver.
You can use Preprocessors using Webpack
Preprocessors can add additional features to the language you are working with. Webpack just passes off the processing of application files to loaders.
As you know, SASS is a preprocessor of CSS that add additional features to the CSS and it is fully compatible with the regular CSS so you don't have to worry about browser support. So when you use Webpack, it bundles the SASS code into code and the end user will never get to know you used SASS to develop the website.
How to set up Webpack for your own Website?
To set up the Webpack, you'll first need to require Node installed because it lets you run Javascript outside the browser. Now you can install Webpack using the npm(Node Package manager).
Run the following commands from eh root of your project folder:
npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev
This code will create a new package.json file which will track the packages you have installed. Now, you'll see a new folder called node_modules.
Alright, Webpack is installed, now run it with:
npx webpack
This will be assumed as your entry point for your project which is ./src/index so the bundles files will be in dist/main.js. If you want to configure the setup then you can create a new config file. This setup will be different and depend on what you're using Webpack for but most of the time config file will be at the root of your project as webpack.config.js. You can load this using the --config flag or you can automate this by specifying a script in the package.json.
"scripts": {
"build": "webpack --config webpack.config.js"
}
Now run the following command and Webpack will bundle your project.
npm run build
You can install webpack-dev-server which will automatically rebuild the project when some changes are made.
Conclusion
That's all for now, You now have the idea of What is Webpack, What it is used for and How do you use it.
Start using it ASAP!
FAQ
- When should I use webpack?
If you are building a complex front-end applications then You can definitely use Webpack.
Webpack is a static bundler and webpack-dev-server is a web server.
