为什么要使用WebPack? [英] Why use WebPack?

问题描述

我花了几天的时间来安装和运行Webpack，并进行了一次测试.但是我发现从webpack出来的bundle.js文件正在做很多不必要的事情，对我来说是没有意义的.

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;

非常简单.但是bundle.js

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();
  }
]);

似乎WebPack正在做很多不必要的代码，这对我来说毫无意义. bundle.js的文件大小也比index.js和greet.js大3倍.对于如此简单的应用，该应用的开发版本看起来也非常令人困惑和混乱.

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.

那么，为什么我要继续花时间在我的项目中使用WebPack? 它输出的所有额外代码是什么，为什么在其中? 有没有其他更好的选择可以帮助我从模块化开发环境中发布代码?

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?

我非常感谢您的帮助，让我了解为什么我应该或不应该使用WebPack.

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

谢谢！

推荐答案

bundle.js的文件大小也比index.js和greet.js大3倍

The bundle.js is also 3 times larger in file size than the index.js and greet.js

Webpack必须为浏览器无法执行的功能(例如，模块加载)放入一些polyfill.如果您有2行代码，那么这些polyfill看起来很沉重，但是，如果您编写了数千行代码，您将不会注意到任何明显的开销，因为这些poyfill仅添加了一次.

Webpack has to put in some polyfills for things the browsers are not capable of, module loading for example. If you got 2 lines of code, these polyfills look very heavy, however if you write thousands of lines of code, you won't notice any significant overhead, as those poyfills are only added once.

那我为什么还要继续花时间在我的项目中使用WebPack?

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

因为它会为较大的项目产生较小的捆绑包，还允许您编写ESnext&干净的模块化代码.

Cause it will produce smaller bundles for larger projects, also it allows you to write ESnext & clean, modular code.

它输出的所有额外代码是什么，为什么在其中?

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

它保持全局作用域整洁，添加一些帮助器和模块加载器，然后加载第一个模块:

It keeps the global scope clean, adds some helpers and a module loader, then loads the first module:

// IIFE to keep global scope clean, ! to prevent Automatic Semicolon Insertion fun
!(function init(modules) {
  var cache = {}; // cache the modules results
  // All modules are in an array, their index is a unique identifier
  function require/*n*/(index/*r*/) {
    if (cache[index]) return cache[index].exports;
    var context/*o*/= (cache[index = { index/*i*/: index, loaded/*l*/: false/*!1*/, exports: {} });

    modules[index].call(
      context.exports, 
      context,
      context.exports, 
      require
    );
    context.loaded = true /*!0*/;
    return context.exports;
  }

  require.modules = modules; // I'm not sure why?...
  require.cache = cache;

  // helper for adding a getter
  require.addGetter /*n.d*/ = function(object, key, getter) {
    require.has(object, key) || Object.defineProperty(object, key, { enumerable: true, get: getter });
  });

  require.prepareExport /*n.r*/ = function(export) {
    if("undefined" != typeof Symbol && Symbol.toStringTag)
      Object.defineProperty(export, Symbol.toStringTag, { value: "Module" });

    Object.defineProperty(export, "__esModule", { value: true });
  };

 // I have no idea what that is doing

  require.startModule /*n.s*/ = 0;
  require(require.startModule); // start execution
})([
  /* Your modules, identified by index */
  function mainModule(context, exports, require) {
      "use strict"; // better performance
      require.prepareExport(export); // as you could override exports in your module, this has to be called afterwards

     var otherModule = function() { // inlined!
        console.log("Have a great day!");
     };

    console.log("I'm the entry point"), 

    otherModule();
  } /* ... more modules would follow here if not inlined */
]);

还有没有其他更好的选择可以帮助我从模块化开发环境中发布代码?

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

还有其他选择，不确定是否更好".

There are alternatives, not sure if they are "better".

这篇关于为什么要使用WebPack?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！