主页 / 问题 / 921431
Accepted
Alexxosipov
Asked:2020-12-16 03:51:34 +0000 UTC2020-12-16 03:51:34 +0000 UTC

webpack 从空的 js 文件生成代码

  • 772

我了解webpack，目前我有最常见的结构：

- dist 
    - fonts
    - images
    - less
        - app.less
    index.html
    index.js

App.less 连接到 index.js，在输出时从中获取单个 css 文件。index.js 内容：

import './less/app.less'

index.js 中没有其他内容。但是在汇编之后，缩小的代码出现在 index.js 中：

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);r(1)},function(e,t,r){}]);
//# sourceMappingURL=bundle.js.map

我不明白它来自哪里？这是巴别塔的作品吗？

webpack

1 个回答

  1. Best Answer

    不，它被称为webpackBootstrap。webpackBootstrap是一个 IIFE（立即调用函数表达式）函数，用于隔离加载和缓存模块的逻辑。

    webpack创建一个缓存（var t = {}）（在概念webpack上它被称为installedModules），以及它自己的实现require（__webpack_require__）：

    function r <-- сокращенно от `require` (n)....

    该函数将模块标识符作为参数。此函数检查模块是否已加载并在缓存中：

    if(t[n]) return t[n].exports;

    如果不是webpack，则调用导出工厂函数。从这里我们可以看出，无论一个特定的模块依赖多少个模块，该模块都会被加载一次并通过以下方式缓存：

    installedModules[moduleId] = {
  i: moduleId,
  l: false,
  exports: {}
};

    正因为如此，模块可以毫无问题地进行通信，因为返回的是同一个对象的引用地址，所以如果模块改变了对象中某个属性的值，那么它就会与依赖于该模块的其他对象同步。

    由于require客户端不支持它，webpack它为所有模块之间的通信提供了自己的附加组件。ES || commonjs还有一些辅助函数可以检查一个 module( )是否属于某个系统。这可以放入一个单独的文件中：

    optimization: {
    runtimeChunk: true
}
    • 2

相关问题