Question

一旦webpack将所有文件和依赖项编译到JS和CSS中，是否可能仅使用这些文件来呈现应用程序或单个组件？

我已经复制了webpack生成的文件，并在html文件中引用了它们，并通过CDN加载了反应

<meta charset="utf-8"/>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <link rel="stylesheet" type="text/css" href="onboard-9699e581.css">

</head>
<body>
    <div id="app"></div>

    <script type="text/javascript" src="./application-164084cc642ac889b814.js"></script>
    <script type="text/javascript" src="./onboard-d3392dbee6550206507b.js"></script>

</body>
</html>

也许我错过了webpack的功能，但是我假设我在jsx文件中创建的组件都将全部编译为JS，并且现在位于./onboard-d3392dbee6550206507b.js文件中？那将允许我引用它们，并允许它们通过reactDOM.render?

呈现

请让我知道是否需要澄清任何内容。仍在努力解决这个问题。

干杯。

Answer 1

想法是将所有内容打包到一个JavaScript文件中，该文件在页面呈现时运行。 React代码将附加到您预定义的任何元素上（在大多数情况下，这将是div＃app），并根据所有JSX和其他逻辑来构建DOM。

JSX不是一个一个地添加的独立代码-您已经构建了一个可以“运行”的完整应用程序。 JSX只是编写HTML的一种奇特方法，还可以包含脚本，并提供了一些不错的功能，例如编写多行HTML片段以便于阅读。

研究this example，然后看是否更有意义。在他们从dist文件夹中运行应用程序时要特别注意，这等效于运行站点的生产版本（在webpack之后）。

Answer 2

就是这样，Webpack要做的就是转换所有jsx文件并将它们捆绑在一个输出js文件中，该文件将由index.html调用（这就是为什么id =“ root”的div的原因）作为脚本标签。那是因为大多数Web浏览器还无法读取jsx。此外，它还会在此过程中缩减代码，使其重量更轻，这意味着加载速度更快。

是否可以仅使用webpack编译文件来渲染React应用程序或组件？

2 个答案: