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('wele 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 piled "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('wele 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?
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('wele 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 piled "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('wele 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?
-
Show your
webpack.config.js– haim770 Commented Jan 3, 2017 at 19:28 - A module bundler takes an entry file, determines all of its dependencies (i.e. other files/modules the file loads) and bines them into one single file (the "bundle"). – Felix Kling Commented Jan 3, 2017 at 19:32
1 Answer
Reset to default 7I'm the author of the first article you linked. A "bundled" file just means all the Javascript your app/website needs to run, piled 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 pile 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.