Why does webpack 2 use `eval ()` to port the code?

Question

I am just learning webpack. I notice that in the resulting .js package, it uses eval like this (when in "Design" mode, not "Production", which produces something completely different):

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/="); /***/ }, 

What is the reason for this? It seems a little strange to use the eval function.

Here's what the production version looks like:

 !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),ol=!0,o.exports}var r={};return tm=n,tc=r,ti=function(n){return n},td=function(n,r,e){to(n,r)||Object.defineProperty(n,r,{configurable:!1,enumerable:!0,get:e})},tn=function(n){var r=n&&n.__esModule?function(){return n.default}:function(){return n};return td(r,"a",r),r},to=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},tp="",t(ts=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}]);