• Webpack is primarily a bundling tool
• We can use it as a pipelining tool to chain other build tools
• The following config imports app.js and creates a bundled output app.bundle.js in the dist directory
• Notice we are using commonjs require() not es2015 import in the webpack config
• By default webpack only cares about js and json files

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  }
};

• webpack-dev-serveris a node server which can rebuild our application on change in development
• It can "hot" reload changed js modules and update them in our browser directly, triggering a reload
• In combination with html-plugin-webpack we can inject our compiled scripts into a template HTML file
• In development we can see all our files loaded individually in the console

let config = {
  ...

  devServer: {
    port: 9000,
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: path.join('src', 'index.template.html'),
      inject: 'body'
    })
  ]
}

• Webpack only understands JS and JSON out of the box
• If we try to load a file Webpack doesnt understand compilation will fail with a loader error
• We need to tell Webpack how to load other types of files and convert them to a JS module
• We do this using loaders
• In the case of JSX, we use Babel to covert JSX files into valid javascript
• We use babel-loader to tell Webpack to use Babel to convert (transpile) .jsx files

var config = {
  ...
  // resolve the file type
  resolve: {
    extensions: ['.js', '.json', '.jsx']
  },

  // Decide which loader to use for the file type
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: 'babel-loader'
      }
    ]
  }
}

• As we add more libraries our bundle gets bigger and bigger
• We can minify our code to single line with no whitespace
• We can remove code that is not used or called (tree shaking)
• We do this using the terser-webpack-plugin
• In Webpack 5 this is added by default to "production" builds
• In pre webpack 5 we have to ad the plugin manually

const TerserPlugin = require("terser-webpack-plugin");

var config = {
  ...
}

if (ENV === 'production') {
  config.optimization = Object.assign(config.optimization || {}, {
    minimize: true,
    minimizer: [new TerserPlugin()]
  })
}

• Assets can be cached by both the browser and our server eg Varnish or Cloudfront
• We can invalidate caches by adding a unique hash per build to our bundled output filename
• Our html-webpack-plugin will handle placing the link to our bundled asset into our index.html
• We dont cache our index.html because its small

var config = {
  ...
  output: {
    filename: 'app.[contenthash].bundle.js'
  }
};

• Application modules change often, but third party libraries do not
• Third party libraries can often be a large part of our overall output
• We often want to cache libraries separately from our application code
• Webpack allows us to split our bundle into separate chunked files

var config = {
  ...
  output: {
    filename: '[name].[contenthash].bundle.js'
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'all',
          test: /node_modules/
        }
      },
    }
  }
}

• Minified, obfuscated is code near impossible to read for debugging
• Tools that report errors in production can't give us meaningful information on where errors occur
• In order to tell humans or reporting tools meaningful line numbers we can use sourcemaps to tell us where errors occured in our original code
• We can use various options for source maps depending on environment so that production source maps are only shared with error reporting tools, not users

var config = {
  ...
  devtool: 'eval'
}

// Other options can be found at
// https://webpack.js.org/configuration/devtool/