2017-04-01 3 views
0

Ich verwende Laravel und Laravel Mix. Die mitgelieferte app.js-Datei bootstrappt ziemlich viele Abhängigkeiten wie jQuery, Bootstrap-sass usw.Webpack: Es gibt etwas JavaScript-Code in der kompilierten Datei, selbst wenn die Quelldatei leer ist

Wenn ich alles in der app.js-Datei lösche, warum gibt es noch etwas Code in der kompilierten js-Datei ? Ist es eine Webpack-Sache? Selbst nachdem ich npm run production ausgeführt habe, bleibt es dort und ich konnte nicht herausfinden, was es tut oder was es bedeutet, und es macht mich nicht wirklich unwohl, wenn ich es nicht weiß.

Hier ist der Code, der zurückgelassen wird:

fügt
! function(n) { 
function t(e) { 
    if (r[e]) return r[e].exports; 
    var o = r[e] = { 
     i: e, 
     l: !1, 
     exports: {} 
    }; 
    return n[e].call(o.exports, o, o.exports, t), o.l = !0, o.exports 
} 
var r = {}; 
t.m = n, t.c = r, t.i = function(n) { 
    return n 
}, t.d = function(n, r, e) { 
    t.o(n, r) || Object.defineProperty(n, r, { 
     configurable: !1, 
     enumerable: !0, 
     get: e 
    }) 
}, t.n = function(n) { 
    var r = n && n.__esModule ? function() { 
     return n.default 
    } : function() { 
     return n 
    }; 
    return t.d(r, "a", r), r 
}, t.o = function(n, t) { 
    return Object.prototype.hasOwnProperty.call(n, t) 
}, t.p = "", t(t.s = 3) 
}([function(n, t) {}, function(n, t) {}, function(n, t) {}, function(n, t, r) { 
r(0), r(1), n.exports = r(2) 
}]); 

Antwort

1

Webpack einige Code zum Bundle-Module richtig zu handhaben. Dieser Code wird als webpack bootstrap bezeichnet. Wenn Sie wissen möchten, was der Code tut, sollten Sie sich die nicht-egglifizierte Version ansehen. Es gibt viele Kommentare und es ist im Allgemeinen einfach, das Wesentliche zu verstehen, obwohl Sie nicht jedes Detail verstehen müssen.

Hier ist der nicht-uglified Code (das ist das gesamte Bündel mit einem leeren Modul):

/******/ (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] = { 
/******/   i: moduleId, 
/******/   l: false, 
/******/   exports: {} 
/******/  }; 
/******/ 
/******/  // Execute the module function 
/******/  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
/******/ 
/******/  // Flag the module as loaded 
/******/  module.l = 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; 
/******/ 
/******/ // identity function for calling harmony imports with the correct context 
/******/ __webpack_require__.i = function(value) { return value; }; 
/******/ 
/******/ // define getter function for harmony exports 
/******/ __webpack_require__.d = function(exports, name, getter) { 
/******/  if(!__webpack_require__.o(exports, name)) { 
/******/   Object.defineProperty(exports, name, { 
/******/    configurable: false, 
/******/    enumerable: true, 
/******/    get: getter 
/******/   }); 
/******/  } 
/******/ }; 
/******/ 
/******/ // getDefaultExport function for compatibility with non-harmony modules 
/******/ __webpack_require__.n = function(module) { 
/******/  var getter = module && module.__esModule ? 
/******/   function getDefault() { return module['default']; } : 
/******/   function getModuleExports() { return module; }; 
/******/  __webpack_require__.d(getter, 'a', getter); 
/******/  return getter; 
/******/ }; 
/******/ 
/******/ // Object.prototype.hasOwnProperty.call 
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 
/******/ 
/******/ // __webpack_public_path__ 
/******/ __webpack_require__.p = ""; 
/******/ 
/******/ // Load entry module and return exports 
/******/ return __webpack_require__(__webpack_require__.s = 0); 
/******/ }) 
/************************************************************************/ 
/******/ ([ 
/* 0 */ 
/***/ (function(module, exports) { 



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

Es ist im Grunde die require von Node.js imitiert, während auch ES Umgang mit den Modulen. All dies ist, damit es im Browser funktioniert (alle Browser für diese Angelegenheit). Siehe auch Node.js - Modules.

Verwandte Themen