Webpack

With the ongoing development of the programming environment JavaScript has been adding new techniques periodically. To catch up with growing size of the modern application JS adapted module system. This led to the growth of the file sizes and the number of files. to solve this problem Webpack is introduced.

 

Webpack is a static module bundler that creates a dependency map based on the relations of dependencies between the modules. Using this map Webpack reduces the number of bundles by combining them where possible.

Major Concepts

Entry

An entry point to create a dependency map. default path is ‘./src/index.js’ and in the ‘webpack.config.js’ file you change the path with the code below:

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

Output

A destination where created bundles end up. The default path for the main bundle is ‘./dist/main.js’ and for the lest is ‘./dist’. In the ‘webpack.config.js’ file you change the path with the code below

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

By default webpack can only read JavaScript and JSON. loaders converts other formats for the webpack to understand.

Plugins

Added on tools for optimization and management

 

Plugins | webpack

 

Mode

There are three modes: ‘development’, ‘production’, ‘none’. set this to optimize the setting for the desired environment.

 

Browser Compatibility (IE8 and below are not supported)

ECMAScript 5 compatibility table

---

References

webpack

An intro to Webpack: what it is and how to use it