Skip to main content

Webpack ↔ legacy production industry standard to Bundle Web App - slow clunky reliable 🐱‍🐉, deep config

Source: webpack.js.org/

webpack.config.js​

Manifest to config Webpack behavior

image

Webpack flow

!limit

add Plugins to modify Webpack default behaviour

NpmInstallWebpackPlugin​

!auto-fixes missing dependencies by installing modules from NPM

Example Webpack snippet for commonJS module

var webpack_modules = {
  "./src/message.js": (module) => {
    module.exports = "Hello World";
  },
};

function webpack_require(moduleId) {
  var moduleFn = webpack_modules[moduleId];
  var module = { exports: {} };
  moduleFn(module);
  return module.exports;
}

const message = webpack_require("./src/message.js");
console.log(message);

Useful Webpack Hacks

TerserPlugin​

Escape Hatch to patch Webpack into 21st century via Plugin

Webpack Plugin

References​

  1. webpack.config.js ↔ Manifest to config Webpack behavior

  2. Vite ↔ Dev tool to scaffold & build framework UI, next-gen ESBuild Bundler 100X Webpack perf, support native Module, native TS

  3. esbuild-loader ↔ add this to every CRA project to fix the painful ass speed build times of Webpack!

  4. TerserPlugin ↔ Escape Hatch to patch Webpack into 21st century via Plugin

  5. SWC ↔ Rust Compiler to power Turbopack || extend Webpack