Webpack - increases the size of a JS library

Question

Using weback for my new project which is a plain JS library written in ECMA 6 standards and does not depend on any external (node) package seems to maximize the size of my o/p library.js file which beats the very purpose of using the same.

Problem

My o/p library.js is the same size has my source file = src files = 33.2 KB while my o/p library.js which is transpiled, minified and ugflied etc is 33.3 KB. Here is my webpack config file:

 var path = require('path'); var webpack = require('webpack'); var projectRoot = path.resolve(__dirname, '../'); module.exports = { devtool: '#source-map', entry: { 'standalone': path.join(__dirname, '../app/standalone'), 'library': path.join(__dirname, '../app/main.js'), }, output: { path: path.join(__dirname,'../public/dist'), filename: '[name].js' }, resolve: { extensions: ['', '.js'], fallback: [path.join(__dirname, '../node_modules')], alias: { 'app' : path.resolve(__dirname, '../app') 'unit': path.resolve(__dirname, '../test/unit') } }, resolveLoader: { fallback: [path.join(__dirname, '../node_modules')] }, module: { preLoaders: [ { test: /\\.js$/, loader: 'eslint', include: [ path.join(projectRoot, 'app') ], exclude: /node_modules/ } ], loaders: [ { test: /\\.js$/, loader: 'babel', include: [ path.join(projectRoot, 'app') ], exclude: /node_modules/ } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.OccurrenceOrderPlugin() ] eslint: { formatter: require('eslint-friendly-formatter') } } 

Here is how my entire library sans test and build folder looks like

    -- app 
        -- module 1 folder
           -index_module1.js
        -- module 2 folder
           -index_module2.js
        -- module 3 folder
           -index_module3.js
        -- module 1 folder
           -index_module3.js
      -- main.js --------------> is my entry file which imports all (inner dependency) the above modules written in ecma 6 and does not have any node module imported

Note : My inference is that webpack adds it huge wrapper lines of code around my main.js which make its size equal to sum of all the source files beating the whole purpose of bundling and minification .

Questions :

1. Is my webpack.config mis - configured ? - given that it does nothing complex

2. Webpack's wrapper code is to wrap all modules etc, but this adds to the size of the file (a huge chunk) - given this , is webpack the right choice for my purpose or is it expected from all build systems that transpiles->bundles->uglifies->minifies ecma 6 modules.?

From my understanding, it looks like Webpack is built to use for react,vue and or web related from end libraries and not for simple JS libary , is this true?

Answer 1

Currently, you cannot get rid of the webpack wrapper code. If the runtime overhead is an issue, check the comparison table and use a bundler with no overhead. Rollup for instance has 0 overhead of ES6 modules and is easy to setup for bundling JavaScript-only modules.