Pack Your web-Stuff in a Bundle Module using Webpack

Webpack is an open-source JavaScript module bundler. It is a module bundler primarily for JavaScript, but it can transform front-end assets like HTML, CSS, even images if the corresponding plugins are included.

Source: https://webpack.js.org/branding/

Why webpack?

If you’re building a large front end application with many static assest such as javascript, css, images, fonts, etc, then yes, webpack will give you great benefits.

There would be no problem if you have less external static files like above. But, in the following case, all those important static files will be slow to load on our browser.

Count them, there is 18 javascript files and 8 CSS files.

There are several big problems:

1. Speed and Performance

When our browser requests this many scripts, there will be a network bottleneck, and it results in slow to load. It affects our application performance.

2. Dependencies

We, sometimes need to override our own CSS. Sometimes, I override bootstrap classes, then I had to manually maintain an ordering of <link> tags.

There is one solution

Just put everything into one huge file and download that instead. This can be easily done with Webpack.

Installing webpack

npm install --save-dev webpack

Just install Webpack for your application using npm. We just need to install it as a development dependency.

Create an entry point

An entry point indicates which module Webpack should use to begin building out its internal dependency graph. Webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

webpack.config.js

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

Output

The output property tells Webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Loaders

Loaders have two properties in your webpack configuration:

1. The test property identifies which file or files should be transformed.
2. The use property indicates which loader should be used to do the transforming.

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

Mode

By setting the mode parameter to either development, production or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production.

module.exports = {
  mode: 'production'
};

webpack for production

Install webpack merge with the following command:

npm install --save-dev webpack-merge

webpack.prod.js

 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'production',
 });

In package.json file, add the following development dependencies:

Finally, you can run npm run build, then you are ready to go.

More code = More files = Less Performance and the solution = webpack :D