巴別建立VS的WebPack巴別裝載機籌建

-1

import Colors from "./colors"; 
module.exports = { 
    Colors 
};

colors.js

module.exports = { 
    // light shades 
    white: "#FFFFFF", 
    snow: "#F9FAFC", 
    darkSnow: "#EFF2F7", 
    extraDarkSnow: "#E5E9F2", 
    // dark tones 
    silver: "#8492A6", 
    slate: "#3C4858" 
}

運行巴貝爾CLI '巴貝爾LIB -d構建' 的輸出被後：索引。 JS

"use strict"; 

var _colors = require("./colors"); 

var _colors2 = _interopRequireDefault(_colors); 

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 

module.exports = { 
    Colors: _colors2.default 
};

colors.js

"use strict"; 

module.exports = { 
    // light shades 
    white: "#FFFFFF", 
    snow: "#F9FAFC", 
    darkSnow: "#EFF2F7", 
    extraDarkSnow: "#E5E9F2", 
    // dark tones 
    silver: "#8492A6", 
    slate: "#3C4858", 
    steel: "#273444" 
}

但使用的WebPack裝載機時，輸出爲

/******/ (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; 
/******/ 
/******/ // 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, __webpack_require__) { 

"use strict"; 


var _colors = __webpack_require__(1); 

var _colors2 = _interopRequireDefault(_colors); 

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 

module.exports = { 
    Colors: _colors2.default 
}; 

/***/ }), 
/* 1 */ 
/***/ (function(module, exports, __webpack_require__) { 

"use strict"; 


module.exports = { 
    // light shades 
    white: "#FFFFFF", 
    snow: "#F9FAFC", 
    darkSnow: "#EFF2F7", 
    extraDarkSnow: "#E5E9F2", 
    // dark tones 
    silver: "#8492A6", 
    slate: "#3C4858", 
    steel: "#273444", 
    black: "#1F2D3D" 
}

所以我就是這裏的問題，爲什麼是的WebPack添加額外的代碼，以我的包。 webpack軟件包代碼與我的babel輸出代碼類似嗎？

來源

2017-06-22 ankur kushwaha

所有的WebPack正在做的是首先如何快速*使用巴貝爾*到transpile您ES6到ES5。隨着巴貝爾輸出，它將其包裝在一些IIFE中，並且用於網絡。 – Li357

webpack有自己的方式來跟蹤依賴關係並實際捆綁文件。
一個關鍵的區別是webpack捆綁包中的每個模塊都會封裝在單個函數閉包中（也許這就是您所說的「這個額外」代碼？）。
webpack v3在幾天前發佈並支持新功能Scope Hoisting，該功能可解決上述確切的行爲。
從DOCS：

範圍吊裝的WebPack 3.一的WebPack的取捨的主打功能捆綁時是組合中的每個模塊將包裹在個別功能關閉。這些包裝函數使得您的JavaScript在瀏覽器中執行的速度更慢。在相比，封樣編譯器和RollupJS「葫蘆」或工具串聯所有模塊的範圍爲一個封閉，並允許您的代碼在瀏覽器中更快的執行時間......

這是文件大小的相關部分

因爲範圍提升將刪除模塊周圍的功能包裝，所以您可能會看到一些小尺寸的改進。然而，顯著改善將是JavaScript的負載在瀏覽器...

來源

2017-06-22 05:23:10

巴別建立VS的WebPack巴別裝載機籌建

回答

相關問題