Explain the basic structure of a Webpack configuration file

A webpack.config.js file is a Node.js module that exports one configuration object. Webpack uses it automatically when it sits in the project root, and the --config flag points to another file. Each top-level key controls one part of the build:

const path = require('path');
module.exports = {
  mode: 'development', // or 'production'
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      // Loader configurations
    ]
  },
  plugins: [
    // Plugin instances
  ],
  devServer: {
    // Dev server configuration
  }
};

• mode turns on webpack's built-in defaults for development or production.
• entry is the module where webpack starts building the dependency graph.
• output sets the folder and file name of the bundles. The folder must be an absolute path, which is why the config calls path.resolve.
• module.rules lists the loaders that transform files such as CSS or TypeScript.
• plugins holds plugin instances that work on the whole build.
• devServer configures webpack-dev-server for local development.

The file can also export a function that receives the CLI's env and argv, so one file can return a different config per environment.