9

我正在尝试替换 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.

你有什么想法这可能是由什么引起的，或者我该如何调试？

4

3 回答 3

6

这是因为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'
  }
于 2016-08-13T19:42:25.573 回答
3

康斯坦丁的答案很好，如果您想替换一个值，这很好。我想替换多个值，所以将以下内容添加到我的loaders数组中

  {
    test: /\.html$/,
    loader: 'raw'
  },
  {
    test: /\.html$/,
    loader: 'string-replace',
    query: {
      multiple: [
        {search: '$variable1', replace: 'replacement 1'},
        {search: '$variable2', replace: 'replacement 2'}
      ]
    }
  }

关键的改变是首先通过raw加载器运行你的 html 文件，然后你可以使用所有正常的string-replace-loader.

于 2016-10-28T10:47:25.467 回答
2

@Jonathon Blok的答案的更新，但对于 Webpack 4，有一些细微的修改：

  • 不得不npm install --save-dev string-replace-loader@2。
  • 必须使用'raw-loader'和'string-replace-loader'标识符，因为 webpack@4 坚持。
  • 使用options:而不是query:按照string-replace-loader文档。

对于 Webpack 4

{
  test: /.*\.html$/,
  loader: 'raw-loader',
},
{
  test: /.*\.html$/,
  loader: 'string-replace-loader',
  options: {
    multiple: [
      {search: '$variable1', replace: 'replacement 1'},
      {search: '$variable2', replace: 'replacement 2'}            ]
  }
}

和以前一样，

关键的变化是首先通过原始加载器运行您的 html 文件，然后您可以使用字符串替换加载器的所有正常配置。

对于 Webpack 5

与上面相同的内容应该适用于 Webpack 5，尽管我还没有测试过，通过省略@2并安装 string-loader 和npm install --save-dev string-replace-loader. 这是因为 string-replace-loader 的 v3 预计可以与 Webpack 5+ 一起使用，根据string-replace-loader 文档。

于 2021-02-27T12:07:12.670 回答