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 patibility 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?

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 patibility 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?

• javascript
• node.js
• webpack

• Duplicate of stackoverflow./questions/43484895/… – Desmond Lua Commented Aug 12, 2017 at 9:10
• 2 Would still like to know if Webpack is capable of outputting bundles without it's module loader bootstrap, as is achievable by Rollup. – Robula Commented Apr 16, 2018 at 15:34
• @Robula there is an opened issue about this take a look at it github./webpack/webpack/issues/2638 – Jose Paredes Commented Apr 16, 2018 at 16:07
• I don't understand why you're using WebPack at all or desire to use global variables. It seems like your project has no need for WebPack or Rollup so you should just remove both of them entirely. – sctskw Commented Jul 18, 2018 at 17:30
• @sctskw Obviously console.log('Test'); is not my project :) I needed a transpiler for es6 – Jose Paredes Commented Jul 18, 2018 at 19:31

2 Answers 2

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 piled 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 piled test.js will result in:

(function () {
'use strict';

console.log('Test');

}());

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

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

rollup -c --no-treeshake`

along with Google closure piler plugin in order to acplish this

import closure from 'rollup-plugin-closure-piler-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({
    pilationLevel: 'WHITESPACE_ONLY',
    processCommonJsModules: true,
    languageIn: 'ES5',
    languageOut: 'ES5'
  })]

  configArr.push(obj);
}

export default configArr;