在Web应用程序中，我们通常使用Webpack打包工具来管理和优化我们的前端代码。html-webpack-plugin是一个非常流行的webpack插件，可以自动将生成的JavaScript、CSS和其他资源文件注入到HTML模板中。
然而，在一些情况下，我们需要加载非根网站路径上的静态资源，例如在休息时加载子目录下的图片或字体文件。本文将介绍如何使用html-webpack-plugin以及相关工具来处理这个问题。
相对路径注入
默认情况下，html-webpack-plugin会将所有的静态资源注入到HTML中，并且这些资源的引用路径都是相对于HTML文件所在的根路径的。如果我们需要将资源引用路径设置为相对于当前页面的路径，我们可以通过设置output.publicPath选项来实现：
// webpack.config.js
module.exports = {
output: {
publicPath: './'
},
// ...
}这样配置后，html-webpack-plugin将会把所有资源注入到HTML页面中，并指定资源的引用路径为相对当前页面的路径。例如，在访问http://example.com/blog/post.html页面时，将会加载http://example.com/blog/assets/main.js等资源文件。
非根路径注入
如果我们需要在休息时加载非根路径上的静态资源，例如在http://example.com/blog/路径下加载http://example.com/blog/assets/main.js文件，我们需要使用html-webpack-plugin插件提供的模板语法和相关工具来动态生成相对路径。
首先，我们可以通过html-webpack-plugin插件提供的模板语法实现。在HTML模板中通过设置<%= htmlWebpackPlugin.options.publicPath %>输出当前页面的公共路径，然后将相对路径拼接到公共路径之后即可：
-- -------------------- ---- -------
---- ---------- ---
------
------
--------- -----------
-------
------
---- -------- ------------------------------------ ------------------ -----------
-------
-------以上代码中，通过<%= htmlWebpackPlugin.options.publicPath %>输出当前页面的公共路径，然后将相对路径assets/logo.png拼接到公共路径之后，生成完整的资源引用路径。这样在休息时访问http://example.com/blog/路径下的页面时，加载的图片路径就是http://example.com/blog/assets/logo.png。
除了使用html-webpack-plugin插件提供的模板语法外，我们还可以使用webpack插件copy-webpack-plugin和file-loader等工具实现非根路径注入。具体操作步骤如下：
使用
copy-webpack-plugin将静态资源复制到输出目录下的指定位置：-- -------------------- ---- ------- -- ----------------- ----- ----------------- - ------------------------------- -------------- - - -------- - --- ------------------- --------- - - ----- ------------- --- -------- - - --- -- -- --- --以上代码中，将
src/assets下的静态资源复制到输出目录下的assets目录中。使用
file-loader为复制后的静态资源生成唯一的文件名：-- -------------------- ---- ------- -- ----------------- -------------- - - -- --- ------- - ------ - - ----- -------------------------- ---- - - ------- -------------- -------- - ----- --------------------- -- -- -- -- -- -- --以上代码中，对所有类型的图片和字体文件进行处理，并生成唯一的文件名。
在HTML模板中使用相对路径加载静态资源：
<!-- index.html --> <html> <head> <title>My
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13118