如何在 html-loader 中包含带有 webpack（版本 2）的 html 部分？

Posted 2023-02-24

【中文标题】如何在 html-loader 中包含带有 webpack（版本 2）的 html 部分？

【英文标题】：How to include html partials with webpack (version 2) with the html-loader?

【发布时间】：2017-11-29 19:16:38

【问题描述】：

我正在努力通过html-loader 包含一个简单的footer.html，作为html 部分）。我正在使用webpack 第 2 版。

我尝试使用$require('**./footer.html**') 和$require('**../footer.html**') 失败。

我没有使用 ejs 加载程序，也没有使用车把插件。

有人知道我该如何解决这个问题，以及是否可以使用webpack 渲染部分内容。

感谢您的建议！

【问题讨论】：

你看到什么样的失败？你期望会发生什么？

它只是打印了 $require('./footer.html') 标记，没有做任何事情。也许不可能用 html-loader 渲染部分，不是吗？如果我使用标准加载器（可能是 ejs），我会得到一个结果，但这会引发文件类型 .html

的错误

“印刷”是什么意思？印在哪里？

@Mathias，您找到解决问题的方法了吗？

【参考方案1】：

我用你的 webpack.config.js 文件进行了测试。您只需从中删除以下内容：

    test: /\.html$/,
    use: ['html-loader']
,

这样fallback lodash loader comes into play。

【参考方案2】：

该功能称为interpolation。这里 test: /\.html$/, use: ['html-loader?interpolate'] , 是一个webpack 配置规则，它通过指定interpolate 标志来利用它。

【讨论】：

非常感谢！该解决方案现在可以正常工作。现在可以使用 $require('./sn-ps/footer.html') 简单地加载 Partials 很棒的建议！

如何只为该部分文件包含 css 或 scss？

【参考方案3】：

在 Webpack.config 文件中，您可以像下面这样添加主 html

   plugins: [ 
    new HtmlWebpackPlugin(
        template: 'index.html'
    ),
    new ExtractTextPlugin('bundle.css')
],

在 package.json 中包含 html-loader 并在 config 块中单独使用以下方法就足够了。

  $stateProvider.state('app', 
            url: '/app',
            template: require('html-loader!root/app/Common/templates/role.html'),
            controller: 'roleController'
        )

所以所有的部分都将被捆绑在 bundle.js 本身中。不需要在 webpack-config 中添加加载器

【参考方案4】：

我使用html-loader 并简单地添加 <%= require('html-loader!./partial/header.html') %> 到我的主要index.html。这对我有用。

【讨论】：

不幸的是，它没有呈现要求状态。它只是返回<%= require('html-loader!./partial/header.html') %>

你有“html-loader”和“html-webpack-plugin”吗？你也可以查看我的 webpack 配置 github.com/bolten08/webpack/blob/master/webpack.config.js

感谢您的提示。我已经在 webpack.config 中有插件。我是否也必须通过 HtmlWebpackPlugin 创建部分内容？这是我的 webpack gitlab.com/redsleeve/webpack