我花了几天时间让Webpack启动并运行，然后才进行测试。但是我发现来自webpack的bundle.js文件正在做很多不必要的事情，对我来说没有任何意义。
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
!(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倍。该应用程序的开发版本也只是看起来非常混乱和杂乱的东西这么简单。
那么为什么我要继续投入时间为我的项目使用WebPack？它输出的所有额外代码是什么？它为什么存在？是否有更好的替代方案可以帮助我从模块化开发环境中发送代码？
我非常感谢您帮助我了解为什么我应该或不应该使用WebPack。
谢谢！
bundle.js的文件大小也比index.js和greet.js大3倍
Webpack必须为浏览器无法使用的东西添加一些polyfill，例如模块加载。如果你有2行代码，这些polyfill看起来很重，但是如果你编写了数千行代码，你就不会注意到任何重大的开销，因为那些poyfill只添加了一次。
那么为什么我要继续投入时间为我的项目使用WebPack？
因为它会为较大的项目生成较小的包，也允许您编写ESnext和干净的模块化代码。
它输出的所有额外代码是什么？它为什么存在？
它保持全局范围干净，添加一些帮助程序和模块加载器，然后加载第一个模块：
// 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 */
]);
是否有更好的替代方案可以帮助我从模块化开发环境中发送代码？
有其他选择，不确定它们是否“更好”。
我同意Webpack增加了你甚至可能不需要的大量内容。它也有这个疯狂的配置文件，接近纯疯狂。
为简单起见，您可以使用脚本标记加载模块文件，然后将Webpack抛到窗外！ （仅限现代浏览器（Edge16+, FF60+, Chrome61+,Safari11+））。
<script type="module" src="greet.js">
<script type="module" src="app.js">
您还可以使用更简单的webpack替代方案，如ParcelJS或Rollup。这些编译器可以做很多事情，具体取决于你需要的东西：
bundle.js文件