Remove Webpack bootstrap from output file

Question

Well, I know Webpack allow us to import packages with require and that's the infrastructure from Webpack.

But, isn't it useless when you don't use require in the entry file?

I have this test.js entry:

console.log('Test');

and the 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] = {
/******/            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');

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

This is useless code that also prevents me from using global variables!

At least to me, it is! and that's why I would like to know if there are any plugin or workaround to remove it?

Answer 1

After some research, I couldn't find a proper way to do this.

But investigating for an alternative I could find rollupjs, an optimized bundler that works as Webpack does, but we can achieve our goal with less code

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

It also can be compiled in different formats.

The format of the generated bundle. One of the following:

• amd – Asynchronous Module Definition, used with module loaders like RequireJS
• cjs – CommonJS, suitable for Node and Browserify/Webpack
• es – Keep the bundle as an ES module file
• iife – A self-executing function, suitable for inclusion as a tag. (If you want to create a bundle for your application, you probably want to use this, because it leads to smaller file sizes.) umd – Universal Module Definition, works as amd, cjs and iife all in one

For further information visit their documentation

Solution for my question

Using the format iife, it encapsulates the scope of my module, so a compiled test.js will result in:

(function () {
'use strict';

console.log('Test');

}());

Which is a more reasonable approach for compiling ES modules depending on the output format.

Answer 2

If you need to bundle/compress legacy code with rollup.js and don't want an iife, I was able to use the --no-treeshake command-line flag

rollup -c --no-treeshake`

along with Google closure compiler plugin in order to accomplish this

import closure from 'rollup-plugin-closure-compiler-js';
import glob from 'glob';

const inputPath = './Static/JavaScript/';
let configArr = [];

for (let val of glob.sync(inputPath + '*.unpack.js')) {
  let obj = {};
  const filenameRegex = val.match(/([\w\d_-]*)\.?[^\\\/]*$/i);

  obj['input'] = filenameRegex['input'];
  obj['output'] = {
    file: inputPath + filenameRegex[1] + '.js',
    format: 'cjs'
  };
  obj['plugins'] = [closure({
    compilationLevel: 'WHITESPACE_ONLY',
    processCommonJsModules: true,
    languageIn: 'ES5',
    languageOut: 'ES5'
  })]

  configArr.push(obj);
}

export default configArr;