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:

npx webpack --mode development
npx webpack --mode production

HTML, CSS and JavaScript are all handled by webpack itself, so dist/ ends up with the page and the assets it points at. --mode development leaves them unminified and shows your own sources in browser devtools; --mode production minifies the page, the stylesheet and the script, and drops the code nothing uses.

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