What is Webpack

Webpack is a static module bundler for modern JavaScript applications.

When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static static assets to server your content from.

Concepts

Entry

Entry Point && Dependency collection

• 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).

Output

Output decide bundles output names.

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.

Loaders

Webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert then into valid modules that can be consumed by your application and added to the dependency graph. Two properties: test and use.

const path = require('path');

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

Plugins

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables. LifeCycle && Compiler API.

The plugin system provided by webpack allows plugins to call lifecycle hooks and mutations.

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',
};

Browser Compatibility

Webpack supports all browsers that are ES5-compliant (IE8 and below are not supported). Webpack needs Promisefor import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.

References

• webpack website