Question

我目前正在使用Webpack（v4），但在将变量和html正确注入html文档中时遇到问题。

如果我使用以下配置：

//rules
rules: [
    {
      test: /\.html$/,
      use: [{
        loader: 'html-loader',
        options: {
          minimize: false
        }
      }
  ],
//...
plugins: [
 new HtmlWebpackPlugin({
    title: 'Foo',
    template: path.resolve(__dirname, 'src/', 'index.html'),
    filename: './index.html'//relative to root of the application,
  })
]

我得到以下信息：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <%= require('html-loader!./foo.html') %>
  </body>
</html>

所以看来我的变量没有被注入html中。我也安装了html-loader。除了以下内容外，我的webpack版本中没有抛出任何错误： “未定义入口点= ./index.html”

但是，当我将装载程序换成underscore-template-loader时，会得到以下信息：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Foo</title>
  </head>
  <body>
 module.exports = function(obj) {
obj || (obj = {});
var __t, __p = '';
with (obj) {
__p += '<div>foo bar</div>';

}
return __p
};
</body>
</html>

根据html-loader的html-webpack-plugin examples，我的变量/部分应该已经包含在内置的html文件中（没有下划线加载器）。

我不确定webpack-config file的设置是否正确（也许是否应用了其他选项/设置？），但是我将我的设置几乎相同，并且不会产生相同的{{3} }。

所以最终目标是：将我的html部分和变量注入到index.html中。

谢谢！

HtmlWebpackPlugin模板未注入变量

0 个答案: