Webpack Bundle File - What Does it Do?

Question

I really don't understand the point of WebPack, I read an intro here and a bunch of other tutorials, but it seems like I have to ask individual questions... I am following an example by creating 2 files of a basic site:

app.js:

document.write('welcome to my app');
console.log('app loaded');

index.html:

<html>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

Then I run webpack ./app.js bundle.js from the CLI to create the bundle file, which happens.

So...how does the bundle file get used now? What is it? I thought it essentially compiled "everything" into a single file and then uglified it, but that doesn't seem to be the case, some of the ouput looks like this (edited to include full output):

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    document.write('welcome to my app');

    console.log('app loaded');

/***/ }
/******/ ]);

So, what's the point? Can the app run from this bundle file? Does the bundle get referenced somehow? Do I still need the original index.html and app.js files once the bundle is built?

A module bundler takes an entry file, determines all of its dependencies (i.e. other files/modules the file loads) and combines them into one single file (the "bundle"). — Felix Kling
– Felix Kling, Commented Jan 3, 2017 at 19:32

Andy Ray · Accepted Answer · 2017-01-03 19:30:05Z

7

I'm the author of the first article you linked. A "bundled" file just means all the Javascript your app/website needs to run, compiled into one file the browser can understand. For example, in your source code you might use require() or import statements. The browser has no idea how to execute those, so Webpack will compile all of your Javascript code into a "bundled" file that the browser can understand and execute without error.

Webpack doesn't minify code by default, you have to use the uglify plugin.

You do not need the original source code, just the output built Javascript file by Webpack. You need to set up your HTML to read the bundled file. Generally you have two Webpack configs, one for local development and one for production deployment.

answered Jan 3, 2017 at 19:30

Andy Ray

32.3k16 gold badges115 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VSO Over a year ago

First of all, thanks for the article - it's good, I just don't really have the background. I thought import statements were in ES5(or 6) and could be used to reference js files that export a module, no? Edit: Oh, I think I get it - I could normally import js files, but I couldn't import/require images and such, but webpack allows me too? (See I did read your article!)

Andy Ray Over a year ago

import/export statements are part of the evolving javascript language, and have growing nodejs support, but are not supported by browsers. stackoverflow is not good for back and forth discussion, I'd suggest asking more questions in the #reactjs IRC channel

Collectives™ on Stack Overflow

Webpack Bundle File - What Does it Do?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related