從輸出文件中移除Webpack引導

Question

嗯，我知道Webpack允許我們使用require導入包，這就是Webpack的基礎結構。

但是，如果在入口文件中不使用require，這不是沒用嗎？

我有這個test.js條目：

console.log('Test'); 

和輸出

/******/ (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 = 1); 
/******/ }) 
/************************************************************************/ 
/******/ ([ 
/* 0 */, 
/* 1 */ 
/***/ (function(module, exports, __webpack_require__) { 

__webpack_require__(2); 


/***/ }), 
/* 2 */ 
/***/ (function(module, exports) { 

console.log('Test'); 

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

這是無用的代碼，還可以防止我使用全局變量！

至少對我來說是！這就是爲什麼我想知道是否有任何插件或解決方法將其刪除？

Answer 1

經過一番研究，我找不到合適的方法來做到這一點。

但調查的替代我能找到rollupjs，優化的捆綁，它作爲的WebPack做，但我們可以用更少的代碼實現我們的目標

// rollup.config.js 
export default { 
    input: 'src/main.js', 
    output: { 
    file: 'bundle.js', 
    format: 'cjs' 
    } 
}; 

它也可以以不同的格式進行編譯。

生成的包的格式。下列之一：

• amd - 異步模塊定義，與模塊裝載機等RequireJS
• cjs使用 - CommonJS的，適用於節點和Browserify /的WebPack
• es - 保持束作爲ES模塊文件
• iife - 自執行功能，適合作爲標籤包含在內。 （如果你想創建一個包爲您的應用程序， 你可能想用這個，因爲它會導致較小的文件 大小。）UMD - 通用模塊定義，可以作爲AMD，CJS和iife 都在同一個

欲瞭解更多信息，請訪問their documentation

解決我的問題

使用格式iife，它封裝了我的模塊的範圍，所以編譯test.js將導致在：

(function() { 
'use strict'; 

console.log('Test'); 

}()); 

這是根據輸出格式編制ES modules一個比較合理的做法。