webpack
webpack logo

bundle your
assets scripts

Install Webpack

npm install --save-dev webpack webpack-cli

Write Your Code

src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <script type="module" src="./index.js"></script>
  </body>
</html>

src/index.js

import bar from "./bar.js";

bar();

src/styles.css

body {
  font-family: system-ui;
}

Bundle It

Point webpack at the page in webpack.config.js:

export default {
  entry: "./src/index.html",
  output: {
    // the page loads a `<script type="module">`, so emit ES modules to match
    module: true,
  },
};

Webpack parses the page, bundles everything it references, and rewrites the URLs. No loader, no plugin.

Prefer a video walkthrough? Watch one here

dist/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <script type="module" src="index.mjs"></script>
  </body>
</html>

Then run webpack on the command-line. HTML, CSS and JavaScript are all handled by webpack itself, so dist/ ends up with the page and the assets it points at.

npx webpack --mode development

--mode development leaves the page and the stylesheet unminified and maps the bundle back to your own files in browser devtools, so what you debug looks like what you wrote.

npx webpack --mode production

--mode production minifies the page, the stylesheet and the script, and drops the code nothing uses. That is the build you deploy.

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. The Native HTML and Native CSS guides cover what the built-in support does, and how to migrate an existing setup onto it.

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