哪种情况会导致不使用templateParameters

时间:2019-05-10 04:13:32

标签: html-webpack-plugin

我正在Webpack配置中设置HtmlWebpackPlugin,并希望使用templateParameters选项,因此我可以将json数据传递给它,并且  在我的html模板中使用它,但是在构建后什么都不会替换!

HtmlWebpackPlugin像这样:

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  chunks: ['app'],
  inject: true,
  templateParameters: {
    foo: "foo' value",
  },
});

index.html像这样:

<body>

  <div><%= foo %></div>

</body>

我也使用html-loader:

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

构建后, <%= foo%> 不能被 templateParameters.foo 代替,应该是这样的:

<body>

  <div>foo' value</div>

</body>

不是这个:

<body>

  <div><%= foo %></div>

</body>

如果要测试,请使用此演示:

https://github.com/react-boilerplate/react-boilerplate

git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git 

npm i

并在此处修改:

https://github.com/react-boilerplate/react-boilerplate/blob/d19099afeff64ecfb09133c06c1cb18c0d40887e/internals/webpack/webpack.prod.babel.js#L70

并添加一个选项 templateParameters

也可以在此处修改:

https://github.com/react-boilerplate/react-boilerplate/blob/d19099afeff64ecfb09133c06c1cb18c0d40887e/app/index.html#L26

并添加一个html标记,如下所示:


  <div><%= foo %></div>

并在演示目录中运行脚本:

npm run build

此后,打开build / index.html并检查我们添加的新标签;

非常感谢!请

0 个答案:

没有答案