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

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配置:devtool的Webpack配置.请注意,不同的devtool值会影响捆绑性能.

实质上,选择任何标记production列的值为yes.

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