有没有办法使用 html-webpack-plugin 包含部分内容?

Posted

技术标签:

【中文标题】有没有办法使用 html-webpack-plugin 包含部分内容?【英文标题】:Is there a way to include partial using html-webpack-plugin? 【发布时间】:2017-06-30 19:50:22 【问题描述】:

我正在使用 Webpack 编译我的脚本和 html(使用 html-webpack-plugin)。问题是,我有 5 个包含相同部分的 HTML 文件,我想将这些部分移动到单独的 .html 文件中,然后将 include 这些部分移动到每个 HTML 文件中。这样,如果我要更改这些较小的 HTML 文件,它将重新编译每个 HTML 文件以表示这些更改。

Webpack 默认对 .js 文件执行此操作,但我可以对 HTML 文件使用类似的内容吗?

【问题讨论】:

【参考方案1】:

您可以在模板中使用<%= require('html!./partial.html') %>。此处示例:https://github.com/jantimon/html-webpack-plugin/blob/master/examples/custom-template/template.html

【讨论】:

如何为每个部分添加模板特定变量? 你可以对它们进行字符串替换 <% var template = require('html!./partial.html')%> 下一行是 <%=template.replace('$someVar', someVar)%> 相当粗略的方法,但现在找不到更简单的解决方案。 您可以尝试使用 - github.com/Vishal0203/file-include-webpack-plugin 这与 gulp-file-include 类似 对此的小提示 - 使用 Webpack 4 时会出现错误:BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. - 所以内联需要是<%= require('html-loader!./partial.html') %> @klewis npm install --save-dev html-loader 可以解决问题。不要将加载器添加到 webpack 配置中,否则会干扰html-webpack-plugin【参考方案2】:

另一种略有不同的解决方案。

html-loaderinterpolate 选项一起使用。

https://github.com/webpack-contrib/html-loader#interpolation

 test: /\.(html)$/,
  include: path.join(__dirname, 'src/views'),
  use: 
    loader: 'html-loader',
    options: 
      interpolate: true
    
  

然后在 html 页面中你可以导入部分 html 和 javascript 变量。

<!-- Importing top <head> section -->
$require('./partials/top.html')
<title>Home</title>
</head>
<body>
  <!-- Importing navbar -->
  $require('./partials/nav.html')
  <!-- Importing variable from javascript file -->
  <h1>$require('../js/html-variables.js').hello</h1>
  <!-- Importing footer -->
  $require('./partials/footer.html')
</body>

html-variables.js 看起来像这样:

const hello = 'Hello!';
const bye = 'Bye!';

export hello, bye

唯一的缺点是你不能像&lt;%= htmlWebpackPlugin.options.title %&gt;这样从HtmlWebpackPlugin导入其他变量(至少我找不到导入它们的方法)但对我来说这不是问题,只需写标题在您的 html 中或使用单独的 javascript 文件处理变量。

【讨论】:

接下来,我想出了如何从 HtmlWebpackPlugin 导入其他变量。使用npmjs.com/package/ejs-html-loader 然后你可以使用 test:/\.html$/, 使用: [ loader: 'ejs-html-loader', options: htmlWebpackPlugin: htmlWebpackPlugin , loader: 'html-loader' , 选项: interpolate: true ] interpolate 已删除,文档没有等效示例:github.com/webpack-contrib/html-loader/blob/…【参考方案3】:

查看Partials for HTML Webpack Plugin 以获得更优雅的东西。它允许您设置 HTML 文件并包含它们,就像您正在寻找的内容一样:

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackPartialsPlugin(
    path: './path/to/partials/body.html'
  )
]

还可以配置添加位置,例如头部与身体,打开与关闭,并允许您传递变量。

【讨论】:

那样你必须在 webpack 配置文件中明确指定任何部分,或者我错过了什么?当您已经将它们包含在 index.html 中时会很麻烦...不是吗? 这个想法是您甚至不再拥有 index.html 文件,并且可以避免拥有一个必须引用其他所有内容的大型单个文件,这更易于维护。管理来自 index.html => 内联加载程序部分流的动态数据也很困难(除非我没有看到好的解决方案),这解决了 它对我来说似乎一点也不优雅。我觉得有一个文件作为布局模板更直接,您可以在其中设置每个部分的位置,就像 Angular 对他的组件架构所做的那样。在这一步之后,可以将数据内容添加为 json\yaml 文件,从使用模板引擎读取的部分读取为 mustache\esj。该解决方案只是将部分粘贴在一起,这不是所要求的。 (嵌入在 html 中的“要求”似乎更像是原始询问者需要的方式) 您所说的不是他们所要求的,您是说只有一个 index.html,但事实并非如此。他们有多个 html 文件,他们希望将每个部分都包含在其中,而您推送的解决方案将要求它们在每个文件中包含这些文件。虽然可行,但它需要维护每个文件中的每个包含。此外,如果需要,他们将不会有乐趣尝试使用该解决方案传递任何局部变量。无论如何,这两种解决方案都有效,并且这里有一些个人偏好,目标是提供另一种选择:)

以上是关于有没有办法使用 html-webpack-plugin 包含部分内容?的主要内容,如果未能解决你的问题,请参考以下文章

webpack系列从零搭建 webpack4+react 脚手架

有没有办法将 postcss 与样式组件一起使用?

有没有办法弄清楚啥是使用 Linux 内核模块?

有没有办法使用“任意”变体作为参数?

有没有办法使用 XCUITest 测试快速操作?

有没有办法使用CSS向后工作[重复]