webpacks (react-scripts) index.html 中的 JS 在做什么？

Question

I am trying to load a React component dynamically into another application (also a simple React app) but cannot get the index.js to be run.我正在尝试将 React 组件动态加载到另一个应用程序（也是一个简单的 React 应用程序）中，但无法运行index.js 。

I am somewhat orienting on this article, but that's actually not the question.我对这篇文章有点定位，但这实际上不是问题。

I stumbled upon the fact that that the generated enormous JS function that is generated to the index.html is somehow the entry point for my index.js to be called.我偶然发现，生成到index.html的巨大 JS function 在某种程度上是我的index.js被调用的入口点。

<!doctype html>
<html lang="en">

<head>
  <!-- head stuff here -->
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!-- this is the function I am talking about -->
  <script>!function (c) { function e(e) { for (var r, t, n = e[0], o = e[1], u = e[2], a = 0, l = []; a < n.length; a++)t = n[a], Object.prototype.hasOwnProperty.call(i, t) && i[t] && l.push(i[t][0]), i[t] = 0; for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (c[r] = o[r]); for (s && s(e); l.length;)l.shift()(); return p.push.apply(p, u || []), f() } function f() { for (var e, r = 0; r < p.length; r++) { for (var t = p[r], n = !0, o = 1; o < t.length; o++) { var u = t[o]; 0 !== i[u] && (n = !1) } n && (p.splice(r--, 1), e = a(a.s = t[0])) } return e } var t = {}, i = { 1: 0 }, p = []; function a(e) { if (t[e]) return t[e].exports; var r = t[e] = { i: e, l: !1, exports: {} }; return c[e].call(r.exports, r, r.exports, a), r.l = !0, r.exports } a.m = c, a.c = t, a.d = function (e, r, t) { a.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, a.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, a.t = function (r, e) { if (1 & e && (r = a(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var t = Object.create(null); if (a.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var n in r) a.d(t, n, function (e) { return r[e] }.bind(null, n)); return t }, a.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return a.d(r, "a", r), r }, a.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, a.p = "/search/"; var r = window.webpackJsonpsearch = window.webpackJsonpsearch || [], n = r.push.bind(r); r.push = e, r = r.slice(); for (var o = 0; o < r.length; o++)e(r[o]); var s = n; f() }([])</script>
  <script src="/search/static/js/2.360c2576.chunk.js"></script>
  <script src="/search/static/js/main.f6fe58e3.chunk.js"></script>
</body>

</html>

Currently I am only including the main.js , this is why my prototype does not work, so I would like to understand what the index.html is actually doing to recreate it in the importing system.目前我只包括main.js ，这就是我的原型不起作用的原因，所以我想了解 index.html 实际上在做什么以在导入系统中重新创建它。

I am not able to find any documentation to what this javascript is actually doing.我找不到任何关于这个 javascript 实际在做什么的文档。 Can anyone help me find some hints of what this function is doing?谁能帮我找到一些关于这个 function 正在做什么的提示？

The project is a simple create-react-app application.该项目是一个简单的create-react-app应用程序。 No further configuration is done, but the "homepage" attribute set in package.json.没有进行进一步的配置，但是在 package.json 中设置了“主页”属性。

Answer 1

Found the answer.找到了答案。 Actually this post got me into the right direction.实际上这篇文章让我进入了正确的方向。

The function is the inlined runtime chunk, to save some network traffic. function 是内联运行时块，以节省一些网络流量。 There is an actual Webpack plugin for that that can be set by env-variable like this有一个实际的 Webpack 插件可以通过 env-variable 像这样设置

INLINE_RUNTIME_CHUNK=false

Source资源

This was implemented due to this reported issue .这是由于这个报告的问题而实施的。

The code from reacts webpack.config.js is the following:来自反应 webpack.config.js 的代码如下：

      // Inlines the webpack runtime script. This script is too small to warrant
      // a network request.
      // https://github.com/facebook/create-react-app/issues/5358
      isEnvProduction &&
        shouldInlineRuntimeChunk &&
        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),

webpacks (react-scripts) index.html 中的 JS 在做什么？

问题描述

1 个解决方案

解决方案1
0 2019-10-04 10:05:42

webpacks (react-scripts) index.html 中的 JS 在做什么？

问题描述

1 个解决方案

解决方案1 0 2019-10-04 10:05:42

解决方案1
0 2019-10-04 10:05:42