Explain the core concepts of Webpack

Webpack builds a dependency graph from an entry point and emits it as output bundles, with loaders and plugins shaping the work in between. It is a static module bundler, which follows every import and require from the entry and combines the modules into bundles. The four main concepts:

1. entry is the module where webpack starts building the dependency graph, ./src/index.js by default.
2. output sets where and how to emit the bundles, ./dist/main.js by default.
3. Loaders, set in module.rules, transform files from other languages and formats, such as CSS or TypeScript, into modules.
4. plugins extend webpack for wider tasks such as bundle optimization, asset management and injecting environment variables.

The docs list two more core concepts. mode turns on built-in defaults for development or production. The other is browser compatibility. The code webpack generates uses Promise for import(), so older browsers need a polyfill.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{ test: /\.js$/, use: 'babel-loader' }]
  },
  plugins: [new HtmlWebpackPlugin()]
};