Что делает JS в webpacks (response-scripts) index.html? - PullRequest
1 голос
/ 04 октября 2019

Я пытаюсь динамически загрузить компонент React в другое приложение (также простое приложение React), но не могу запустить index.js .

Я немного ориентируюсь на этой статье, но на самом деле вопрос не в этом. index.html - это точка входа для моего 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>

В настоящее время я включаю только main.js , поэтому мой прототип не работает, поэтому я хотел бы понять, что на самом деле делает index.html для воссозданияэто в системе импорта.

Я не могу найти документацию о том, что на самом деле делает этот JavaScript. Может кто-нибудь помочь мне найти некоторые подсказки о том, что делает эта функция?

Проект представляет собой простое приложение create-реагировать-приложение . Дальнейшая настройка не производится, но атрибут "homepage" установлен в package.json.

1 Ответ

0 голосов
/ 04 октября 2019

Нашел ответ. На самом деле этот пост направил меня в правильном направлении.

Функция представляет собой встроенный блок времени выполнения для экономии сетевого трафика. Для этого существует реальный плагин Webpack, который можно установить с помощью env-variable, например:

INLINE_RUNTIME_CHUNK=false

Source

Это было реализовано из-за сообщения об этом Проблема .

Код от реагирует 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/]),
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...