バベルバベルcliの 'バベルのlib -dビルド' 出力をされ実行した後のWebPACKのバベルローダ対

Question

index.js

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" 
} 

を構築構築： インデックスを。 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出力コードと似ていますか？

Answer 1

webpackには、依存関係を追跡して実際にファイルをバンドルする独自の方法があります。
主な違いの1つは、webpackのバンドルの各モジュールが個別の関数クロージャでラップされるということです（多分これはあなたが参照しているものです、この「余分な」コードですか？）。
webpack v3は数日前にリリースされ、新しい機能Scope Hoistingをサポートしています。この機能は、上記の動作に対応しています。 DOCSから
：バンドルは、あなたのバンドル内の各モジュールは、個々の機能の閉鎖に をラップするというものであったとき

範囲巻上げはWebPACKの3のフラッグシップ機能のWebPACKの トレードオフの一つです。これらのラッパー関数を使用すると、JavaScriptがブラウザで実行される速度が遅くなります（ ）。 比較では、閉鎖コンパイラおよびRollupJS「ホイスト」や のようなツールは...

これを1つの閉鎖にすべてのモジュールの範囲を連結し、ブラウザでのより速い実行時間を持つためにあなたのコードの を許可しますファイルサイズに関連する部分です

スコープホイストは、 モジュールの関数ラッパーを削除するため、小さなサイズが改善される場合があります。しかし、 有意な改善がES5にごES6をtranspileするバベル*を使用*