如何使用 html-loader 将 html 部分包含在 webpack（版本 2）中？

Question

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

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

我没有使用 ejs 加载器，也没有使用 handlebar 插件。

有人知道我该如何解决这个问题以及是否可以使用 webpack.

渲染局部图像

感谢您的建议！

Answer 1

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

Answer 2

在 Webpack.config 文件中，您可以添加如下所示的主要 html

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

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

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

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

Answer 3

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

Answer 4

我用你 webpack.config.js 文件测试过。您所要做的就是从中删除以下内容：

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

所以 fallback lodash loader comes into play.

如何使用 html-loader 将 html 部分包含在 webpack（版本 2）中？

How to include html partials with webpack (version 2) with the html-loader?

javascript

require

include

partials

webpack