What is Webpack?

Webpack is nothing but a static module bundler which makes your code renderable into a web browser. It recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles.

What is Bundling?

Bundling is a technique to reduce the load time and the number of HTTP requests by grouping the multiple related files into one. You can make as many bundles you want but fewer files mean fewer HTTP requests which certainly improves the load performance. You can combine the javascript files, CSS, sass, or any other related file.

What is Minification?

Minification is a technique to optimize the code by removing the extra spaces, comments, shortening variables, and removing other unnecessary code.

Webpack looks over your application source code and builds a dependency graph and generates bundles. The dependency graph is a directed graph representing the dependencies that your file depends on. Like your file can import or require code from some other file, a webpack treats it as a dependency and generates a dependency graph accordingly.

Webpack Concepts…

Entry: The point/directory where webpack should begin building the full dependency graph. It looks at the files that are imported into the entries and adds these files into the dependency graph and hierarchically goes through the files and adds them to the dependency graph accordingly until it covers all the code needed to run the application. By default its value is ./src/index.

module.exports={
   entry:'.src/index.js'
}

Making multiple entries means you telling the webpack to make different dependency graphs for different files. It is a more optimized technique rather than having a single entry point.

module.exports={
   entry:{
      page1:'.src/page1.js',
      page2:'.src/page2.js'
  }
}

Output: The location to bundle your files and how to name these files. By default, t is set to ./dist/main.js for the main output file and ./dist for any other file.

module.exports={
   output:{
      path:path.resolve(__dirname,"build"),
      filename:'first-webpack.bundle.js'
   }
}

The filename tells the name of the bundler and tells where we want to emit the bundle.

Loaders: Webpack only understands Javascript and JSON but Loaders can extend its functionality to cover other types of files also like .css, .sass, or any other file. Loaders transform the files into modules so that they can be added to the dependency graph.

Loaders have two properties

1. test tells the type of file or files should be transformed
2. use tells which loader to use for that particular type of file

module.exports={
   module: {
      rules: [
         {
            test:/\.css$/,
            use:["style-loader","css-loader"]
         }
      ]
   }
}

Plugins: Plugins do the task that can not be done by loaders it works at bundle or chunk level. It performs tasks like bundle optimization, defining environment variables, modifying compiler settings, etc.

module.exports={
   plugins:[
      new HtmlWebpackPlugin({
         template:path.resolve(__dirname,"src","index.html")
      })
   ]
}

Using HtmlWebpackPlugin to load an HTML template from ‘src/index.html’.

Mode: This tells which configuration and optimization technique to use. The modes available are development, production, and none. The webpack behaves differently for each environment. The production built makes the smallest built and takes a longer time to finish whereas development mode is used for faster build times irrespective of bundle size. The default value is production.

module.exports={
   mode:'production'
}

Browser Compatibility: Webpack supports all browsers that can run javascript ES5 or above. To run on older browsers you can use polyfill.

Conclusion

So this was a little introduction to Webpack, I hope this article has given you a basic idea about webpack. I will also make a blog on “Getting starting with webpack.” soon. Till the time explore the web there are a lot of resources available and do give a clap if you have learned something from this article.