Question

我刚学习webpack。我注意到在生成的bundle.js中它使用eval（在“开发”模式下，而不是“生产”，它产生完全不同的东西）：

function(module, exports, __webpack_require__) {

"use strict";
eval("\r\nvar Component = (function () {\r\n    function Component() {\r\n        this.myProperty = \"Hello\";\r\n    }\r\n    return Component;\r\n}());\r\nexports.Component = Component;\r\n//# sourceMappingURL=component.js.map//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL2FwcC9jb21wb25lbnQuanM/NjBiZSJdLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcclxudmFyIENvbXBvbmVudCA9IChmdW5jdGlvbiAoKSB7XHJcbiAgICBmdW5jdGlvbiBDb21wb25lbnQoKSB7XHJcbiAgICAgICAgdGhpcy5teVByb3BlcnR5ID0gXCJIZWxsb1wiO1xyXG4gICAgfVxyXG4gICAgcmV0dXJuIENvbXBvbmVudDtcclxufSgpKTtcclxuZXhwb3J0cy5Db21wb25lbnQgPSBDb21wb25lbnQ7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPWNvbXBvbmVudC5qcy5tYXBcblxuXG4vLy8vLy8vLy8vLy8vLy8vLy9cbi8vIFdFQlBBQ0sgRk9PVEVSXG4vLyAuL2FwcC9jb21wb25lbnQuanNcbi8vIG1vZHVsZSBpZCA9IDBcbi8vIG1vZHVsZSBjaHVua3MgPSAwIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EiLCJzb3VyY2VSb290IjoiIn0=");

/***/ },

这背后的原因是什么？使用eval函数似乎有点奇怪。

这就是生产版本的样子：

!function(n){function t(e){if(r[e])return r[e].exports;var o=r[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=n,t.c=r,t.i=function(n){return n},t.d=function(n,r,e){t.o(n,r)||Object.defineProperty(n,r,{configurable:!1,enumerable:!0,get:e})},t.n=function(n){var r=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(r,"a",r),r},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=1)}([function(n,t,r){"use strict";var e=function(){function n(){this.myProperty="Hello"}return n}();t.Component=e},function(n,t,r){"use strict";var e=r(0),o=function(){function n(){this.myComponent=new e.Component,console.log(this.myComponent.myProperty)}return n}();t.App=o}]);

Answer 1

这取决于您的devtool偏好。通常，devtool值应设置为以下值之一： false，"source-map"，"nosources-source-map"。

有关详细信息，请参阅Webpack配置：Webpack configuration for devtool。请注意，不同的devtool值会影响您的捆绑性能。

基本上，选择将production列标记为是的任何值。

使用eval()包装代码是捆绑源映射的最快方法。它不会对源映射映射执行复杂的代码，因此可以提供快速的增量构建。

为什么webpack 2 bundle使用`eval（）`来包装代码？

1 个答案: