Webpack在构建后删除片段代码，如何保留它？

Question

我定义了一个 sn-p 代码并在 web 中显示它，以便用户可以复制使用，但是在使用 Webpack 生产模式构建应用程序后，sn-p 消失了。

我认为 webpack 将其视为未使用的代码，因此在构建时将其删除。

片段代码：

let html = `
      <script>
        (function(w, d, t, s, n) {
          ...
          const fn = function() {
            (w[n].q = w[n].q || []).push(arguments);
          };
          w[n] = w[n] || fn;
          const f = d.getElementsByTagName(t)[0];
          const e = d.createElement(t);
          const h = '?v' + new Date().getTime();
          e.async = true;
          e.src = s + h;
          f.parentNode.insertBefore(e, f);
        })(window, document, 'script', '${process.env.UNIVERSAL_SCRIPT}', 'fd');
        window.fd('form', { userId: '${form.userId}', formId: '${form.id}' });
      </script>
    `;
    html = jsBeautify.html(html, { indent_size: 2 });

在反应组件中渲染：

<SyntaxHighlighter language="xml" style={monokai} id="html">
  {html}
</SyntaxHighlighter>

这里是演示库：https://github.com/minhtranite/webpack-remove-snippet。请运行start和start:prod查看差异结果。

Answer 1

您似乎没有定义变量form，因此构建失败。或者，language="html" 导致它被解析为 html。 language="text" 会将其呈现为文本。