javascript - 在 webpack 中使用 html-webpack-plugin 和 string-replace-loader

Question

我正在尝试替换 index.html 中的变量，如下所示:

<meta name='author' content=$variable>

在我使用的配置文件中:

  {
    test: /index\.html$/,
    loader: 'string-replace',
    query: {
      search: '$variable',
      replace: 'stuff to inject',
    },
  }

在loaders阵列，然后在 plugins :

new HtmlWebpackPlugin({
  template: conf.path.src('src/index.html'),
  inject: true,
})

但是这个设置会导致:

ERROR in ./~/html-webpack-plugin/lib/loader.js!./src/index.html
Module parse failed (...) Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

您是否知道这可能是由什么引起的，或者我该如何调试？

Answer 1

这是因为 string-replace-plugin 需要一个导出字符串的模块。您应该将 HTML 文件转换为 CommonJS 模块。

例如，这是使用raw-loader的方式:

首先，给html中的content属性加上引号

<meta name='author' content='$variable'>`

和

{
    test: /index\.html$/,
    loader: 'string-replace?search=$variable&replace=stuff to inject!raw'
  }