Atriom is a powerful and flexible optimization tool that maps and visualizes component, module, and dependency relationships within a federated micro frontend architecture. Atriom supports multiple frontend frameworks (React, Vue, Angular) and provides developers with valuable information about their application’s webpack build within minutes!

For more information, check out (and clap) our Medium article, visit our website, or find us on GitHub.

As more users visit your site the more users serve up your content. More users makes faster downloads, less server load, lower data costs, more decentralized. PageSpeed will also increases by not blocking page load.

atorable-loader

/////////////////////////////
/// Example file in build ///
/////////////////////////////

import React from 'react'
import { ATorImg } from 'atorable-react'
// Secret Sauce Conversion w/ Webpack Config below //
import hugeImage from './hugeImage.jpg' // ==> 'magnet:?xt=urn:...' 

const Example = (props: any) => {
  return (
    <div>
      <ATorImg magnetURI={hugeImage} style={{border: 'solid'}} />
    </div>
  )
}

//////////////////////
/// Webpack Config ///
//////////////////////

const rootURL = 'http://localhost:8080/' // Define your root url http://example.com/
// this makes it possible for the initial torrent to be downloaded ending slash / is important.

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg|m4v|mp4)$/i,
                //   test: /src[\\\/]assets[\\\/]Needle\.jpg$/, // for targeting a specific file
                use: [
                    {
                        loader: 'atorable-loader',
                        options: {
                            baseURL: rootURL,
                            showMagnetInfo: true // optional
                        }
                    }
                ]
            }
        ]
    }
}


///////////////////
/// Pro Version ///
///////////////////


module.exports = {
	module: {
		rules: [
			{
				test: /.(png|jpe?g|gif|svg|m4v|mp4)$/i,	// regex match files of your choice
				use: [
					{
						loader: 'atorable-loader',
						options: {
							ATORABLE_SECRET_KEY: process.env.ATORABLE_SECRET_KEY,
							showMagnetInfo:	true	// optional,
							PRODUCTION: true // optional default: false
						}
					}
				]
			}
		]
	}
}

Using React? Try atorable-react.

Pro? Atorable.com.

Made possible with WebTorrent.

I am learning webpack, and almost all blogs, youtube tutorials suggest to use babel along with webpack. They suggest babel, so that modern ES6+ syntax can be transpiled to ES5 syntax in the build file, which is widely supported as compared to ES+ syntax. However, all the major browsers support ES6+ syntax now. And if I know that my user base uses latest versions of chrome, do I still need to add babel with webpack?

We are pretty sure that we have finalized most of the designs for webpack UI, a web interface which will make it easier to use webpack. A view of the design sheets are found here

I've spent a couple days getting Webpack up and running and just got a test going. However I found that the bundle.js file that came out of webpack was doing a lot of unnecessary things that make no sense to me.

index.js

    import greet from './greet';
    
    console.log("I'm the entry point");
    greet();

greet.js

    function greet() {
        console.log('Have a great day!');
    };
    
    export default greet;

So super simple. But bundle.js

    !(function(e) {
      var t = {};
      function n(r) {
        if (t[r]) return t[r].exports;
        var o = (t[r] = { i: r, l: !1, exports: {} });
        return e[r].call(o.exports, o, o.exports, n), (o.l = !0), o.exports;
      }
      (n.m = e),
        (n.c = t),
        (n.d = function(e, t, r) {
          n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r });
        }),
        (n.r = function(e) {
          "undefined" != typeof Symbol &&
            Symbol.toStringTag &&
            Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
            Object.defineProperty(e, "__esModule", { value: !0 });
        }),
        (n.t = function(e, t) {
          if ((1 & t && (e = n(e)), 8 & t)) return e;
          if (4 & t && "object" == typeof e && e && e.__esModule) return e;
          var r = Object.create(null);
          if (
            (n.r(r),
            Object.defineProperty(r, "default", { enumerable: !0, value: e }),
            2 & t && "string" != typeof e)
          )
            for (var o in e)
              n.d(
                r,
                o,
                function(t) {
                  return e[t];
                }.bind(null, o)
              );
          return r;
        }),
        (n.n = function(e) {
          var t =
            e && e.__esModule
              ? function() {
                  return e.default;
                }
              : function() {
                  return e;
                };
          return n.d(t, "a", t), t;
        }),
        (n.o = function(e, t) {
          return Object.prototype.hasOwnProperty.call(e, t);
        }),
        (n.p = ""),
        n((n.s = 0));
    })([
      function(e, t, n) {
        "use strict";
        n.r(t);
        var r = function() {
          console.log("Have a great day!");
        };
        console.log("I'm the entry point"), r();
      }
    ]);

It seems like WebPack is doing a lot of unnecessary code that just makes no sense to me. The bundle.js is also 3 times larger in file size than the index.js and greet.js. The development build of the app also just looks very confusing and messy for something so simple.

So why should I continue to invest time into using WebPack for my projects?

What is all the extra code it is outputting and why is it there?

Are the any better alternatives that will help me ship my code from a modular development environment?

I'd really appreciate your help in getting me to understand why I should or shouldn't use WebPack.

Thanks!

Edit: thanks for your replies everyone. I think I had an over simplified idea of what exactly webpack was doing but you've given me a better appreciation for what it's doing and that the larger the code the less noticable webpacks added code is. I appreciate it!