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: {
    filename: "[contenthash].js",
    cssFilename: "[contenthash].css",
    htmlFilename: "[name].html",
  },
};

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="725d71b1a0d330cfd1ad.css" />
  </head>
  <body>
    <script src="91b32a0aad9e59b71d57.js"></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 hashed assets it points at.

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