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

中添加内容属性的引号

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

和

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

Answer 2

康斯坦丁的答案很好，如果你想替换一个值，那就很好。我想替换多个值，因此将以下内容添加到我的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的所有常规配置。

Answer 3

更新 @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 文件，然后你可以使用 string-replace-loader 的所有正常配置。

对于 Webpack 5

同上应该适用于 Webpack 5，虽然我还没有测试它，通过省略 @2 并使用 npm install --save-dev string-replace-loader 安装 string-loader。这是因为 string-replace-loader 的 v3 预计适用于 Webpack 5+，根据 string-replace-loader docs。

在webpack中使用带有string-replace-loader的html-webpack-plugin

3 个答案:

对于 Webpack 4

对于 Webpack 5