webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack bundle your assets scripts Install Webpack Copynpm install --save-dev webpack webpack-cli Write Your Code src/index.js Copyimport bar from "./bar.js"; bar(); src/bar.js Copyexport default function bar() { // } Bundle It Start without a configuration file, or provide a custom webpack.config.js: Copyimport path from "node:path"; import { fileURLToPath } from "node:url"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); export default { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", }, }; Prefer a video walkthrough? Without config page.html Copy<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ... </head> <body> ... <script src="dist/bundle.js"></script> </body> </html> Then run webpack on the command-line to create bundle.js. Awesome, isn't it? Let's dive in! Get Started quickly in our Guides section, or dig into the Concepts section for more high-level information on the core notions behind webpack. Support the Team Through contributions, donations, and sponsorship, you allow webpack to thrive. Your donations directly support office hours, continued enhancements, and most importantly, great documentation and learning material! Latest Sponsors Platinum Sponsors Gold Sponsors Silver Sponsors Bronze Sponsors Backers