使用html-loader实现页面公共部分复用的功能

最新推荐文章于 2025-06-23 17:09:30 发布

原创最新推荐文章于 2025-06-23 17:09:30 发布 · 1.1w 阅读

3 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在Webpack项目中解决多个HTML页面顶部导航栏复用问题的方法，通过合理配置Webpack并使用html-loader实现公共部分的代码抽取，避免重复工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目有十几个页面,顶部导航栏是相同的,页面一多,修改起来就很麻烦,因此,需要使用类似于php里面include的功能,实现复用,但是项目没有后台,是静态页面,因此使用了webpack里面的依赖.

webpack里面有个`html-loader`有这样的功能

因此在webpack-config.js中添加如下代码:

        {
          test: /\.(html)$/,
            use: {
              loader: 'html-loader'
            }
         }

然后抽取公共部分的html代码,新建新的html文件common.html,
在每个页面对应的部分引入:
<%= require(./common.html') %>
结果webpack报错了,页面加载不出来,不仅仅如此,把html代码还原后依旧报错,
而且是webpack-html-plugin报错
网上查了是webpack-html-plugin跟html-loader冲突,我把webpack-html-plugin的模板设置成html,
就不能使用html-loader解析html文件.
于是删除了webpack.config.js里的html-loader相关的配置,在对应页面的代码修改如下:
<%= require('html-loader!./common.html') %>
‘html-loader!’表示仅仅在这串代码使用html-loader解析.
达成了理想中的效果