如何使用Webpack一次性整合静态html和bundle js的资产？

Question

我有一个homepage（ index.html ），它是带有其资产的静态html，并且在用户登录该主页后，它将转到第二个页面（ home.html ），这是一个react应用程序。

我的文件夹结构是这样的：

--build/
----index.html
----home.html
----home.bundle.js
----assets/
------index.css
------index.js

--src/
----static/
------index.html
------home.html
------assets/
--------homepage.css
--------homepage.js
----components/
------home.js

我想使用webpack：
1.缩小index.html的资产
2.捆绑index.js应用。

我的问题是：
1.我将index.html所有资产捆绑在一起，而不仅仅是uglify呢？ 这是更好的方法吗？
2.如何使用Webpack满足以上两个要求？ 我知道如何捆绑纯SPA，但不知道如何处理这种混合类型。

谢谢

Answer 1

您不能将html文件丑化（否则我今天将学到一些东西；-)），但是您可以使javascript丑陋以减小大小，并在将它们重新加载到浏览器中时提供更好的性能。

因此，您可以做的就是将所有JavaScript都捆绑在一个捆绑文件中，然后手动将其插入html文件中。 之所以可以这样做，是因为通常来说，我们为webpack生成的包提供一个静态名称（例如bundle.js）。

希望能回答您的问题吗？

罗曼