我花了几天的时间来配置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。
谢谢!