Webpack 是一款广泛使用的前端代码打包工具，它能够将多个 JS / CSS / HTML 等文件打包成一个或多个 bundle 文件，并且能够实现代码的压缩、合并、拆分等优化操作。但是，在使用 Webpack 打包后，有时候会遇到页面空白的问题，即打开页面却看不到任何内容。本文将介绍这个问题的原因，并提供解决方案。
问题原因
Webpack 打包后页面空白的问题，通常是由于以下两个原因引起的：
块上下文名称的不一致：Webpack 打包时，每个块（module）都有一个名称，这个名称会成为块上下文（context）的名称。如果块的上下文名称不一致，就可能导致页面空白。
资源路径的错误：在 Webpack 打包后，资源文件的路径可能会发生变化，如果资源文件的路径错误，就可能导致页面空白。
解决方案
1. 块上下文名称的不一致
为了解决块上下文名称的不一致问题，我们可以使用 Webpack 的 output 配置项，手动指定块上下文名称。具体做法是在 webpack.config.js 文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-- ----------
------- -
-- --------
-------------- --------------------------------
-- --------- --- --
----------- ----
--
--其中，chunkFilename 指定了块文件的命名规则，publicPath 则指定了静态资源文件的 URL 路径。将这两个配置项设置为合适的值，就可以解决块上下文名称不一致的问题。
2. 资源路径的错误
为了解决资源路径错误的问题，我们可以在模板文件中使用模板语法代替硬编码资源路径，这样 Webpack 在打包时就会自动将资源路径替换为正确的值。具体做法是在模板文件中使用以下语法：
<img src="<%= require('./img/logo.png') %>" />这里，require('./img/logo.png') 会被 Webpack 转换为正确的资源路径，并在打包后替换到模板文件中。通过这种方式，就可以避免资源路径不正确而导致页面空白的问题。
总结
Webpack 打包后页面空白的问题，通常是由于块上下文名称不一致或资源路径错误引起的。通过手动指定块上下文名称和使用模板语法替代硬编
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646055fb968c7c53b020c6e9