Webpack: What You Need To Know

Webpack is a tool that helps you build and bundle JavaScript files. It's used by the majority of Node.js projects, including front-end frameworks like React and Vue, as well as apps built-in JavaScript such as Airbnb or Facebook. Webpack was created by Tobias Koppers who posted his first commit on GitHub in September 2012. Since then it has grown into one of the most popular tools for managing dependencies while developing modern web applications using any Frontend Framework like VueJs, ReactJs etc.

What is webpack?

Webpack is a module bundler. It takes all your code and bundles it into one file.

It can be used to bundle CSS, HTML and JS files
It can also minify the code for production build

What are the benefits of webpack?

Webpack helps you to bundle all your javascript in one file. It also helps you to load css and html files.

Webpack can help you to minify your files.

Webpack can help you to add source maps

What is an entry point?

The entry point is the first file that Webpack processes. Most of the time, the entry point will be a JavaScript file since you'll be using it to bootstrap your application and get everything up and running. However, it's also possible to use an HTML or CSS file as your entry point if you're just using Webpack for its asset management capabilities (which isn't recommended).

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

What is a Module?

A module is a javascript file that can be used by other modules.

When you're writing your own code, it's easy to forget that Javascript is just one language among many, and that other people are coding in their own preferred languages. If you write a library in Python, for example, your users might not know Python but they do know Javascript! So when creating libraries for use in the frontend ecosystem of webpack, it's important to consider how those dependencies will be consumed by users who don't have access to our original source files. That's where Webpack comes into play: with its ability to bundle all sorts of assets together and make them available on any webpage anywhere on the internet - regardless of whether there exists an exact copy of those files somewhere else on their own machines or not!

What is a loader?

A loader is a plugin that tells webpack how to load files into your project. Webpack has a default loader for most formats, including images and fonts. Loaders can be used to process files before bundling them with the rest of your code so you can do things like pre-process SASS or CoffeeScript, minify HTML/CSS/JS, add cache headers and so on.

What is a bundle file?

A bundle file is a compiled version of your code. It is a single JavaScript file that contains all the code you need to run, and can be used to load your application in the browser.

Bundling your code into one file allows you to serve only that one file. This helps improve page speed and decrease bandwidth usage because the browser has fewer requests to make when loading your site, unlike if it had to request each individual script separately.

How do I add css to webpack?

To add css to your webpack project, you will need to use the css-loader. By default, webpack uses a style-loader that will inject any styles into your javascript bundle (you can read more about this here). To use the css-loader with style-loader, you have to tell it where your main.css file is located and then reference it in your @import rule:

module.exports = {

test: /\.(png|gif|jpg)$/,

paths: {

'node_modules/': 'node_modules/' },

output: {

filename: '[name].[hash].js',

path: path.resolve(__dirname, 'dist'),

publicPath: '/dist/',

  }, 
devServer: { contentBase : __dirname } };

How do I add html to webpack?

There are a few ways to add html to webpack. You can either use the html-loader, or you can use the html-minifier. The third option is using a plugin called html-webpack-plugin, which will automatically inject your html into your bundle without having to do any extra work.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

Conclusion

I hope this article has helped you understand webpack and its benefits. It's a powerful tool that can make your life much easier when it comes to managing front-end assets and code, so I encourage you to try it out for yourself!

Dalia's blog