[英]Use html-webpack-plugin with string-replace-loader in webpack
I'm trying to replace a variable in index.html that looks like this:我正在尝试替换 index.html 中的一个变量,如下所示:
<meta name='author' content=$variable>
In the config file I use:在我使用的配置文件中:
{
test: /index\.html$/,
loader: 'string-replace',
query: {
search: '$variable',
replace: 'stuff to inject',
},
}
In the loaders
array, and then in plugins
:在
loaders
数组中,然后在plugins
:
new HtmlWebpackPlugin({
template: conf.path.src('src/index.html'),
inject: true,
})
But this setting results in:但此设置导致:
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.
Do you have any ideas what this can be caused by or how can I debug this?你有什么想法这可能是由什么引起的,或者我该如何调试?
It's caused because of string-replace-plugin
expects a module that exporting a string.这是因为
string-replace-plugin
需要一个导出字符串的模块。 You should convert HTML file to CommonJS module.您应该将 HTML 文件转换为 CommonJS 模块。
For example, this is the way by using raw-loader
:例如,这是使用
raw-loader
:
first, add quotes to content attribute in html首先,在 html 的 content 属性中添加引号
<meta name='author' content='$variable'>`
and和
{
test: /index\.html$/,
loader: 'string-replace?search=$variable&replace=stuff to inject!raw'
}
Konstantin's answer works fine and is good if you want to replace one value. Konstantin 的答案很好用,如果您想替换一个值,这很好。 I wanted to replace multiple values so added the following to my
loaders
array我想替换多个值,因此将以下内容添加到我的
loaders
数组中
{
test: /\.html$/,
loader: 'raw'
},
{
test: /\.html$/,
loader: 'string-replace',
query: {
multiple: [
{search: '$variable1', replace: 'replacement 1'},
{search: '$variable2', replace: 'replacement 2'}
]
}
}
The key change is to first run your html file through the raw
loader, and then you can use all the normal config for the string-replace-loader
.关键的变化是首先通过
raw
加载器运行你的 html 文件,然后你可以使用string-replace-loader
所有正常配置。
An update to @Jonathon Blok 's answer, but for Webpack 4, with some slight modifications:更新@Jonathon Blok的答案,但对于 Webpack 4,稍作修改:
npm install --save-dev string-replace-loader@2
.npm install --save-dev string-replace-loader@2
。'raw-loader'
and 'string-replace-loader'
identifiers because webpack@4 insisted.'raw-loader'
和'string-replace-loader'
标识符,因为 webpack@4 坚持。options:
instead of query:
as per the string-replace-loader
docs.options:
而不是query:
根据string-replace-loader
文档。{
test: /.*\.html$/,
loader: 'raw-loader',
},
{
test: /.*\.html$/,
loader: 'string-replace-loader',
options: {
multiple: [
{search: '$variable1', replace: 'replacement 1'},
{search: '$variable2', replace: 'replacement 2'} ]
}
}
As before,和以前一样,
The key change is to first run your html file through the raw loader, and then you can use all the normal config for the string-replace-loader.
关键的变化是首先通过原始加载器运行你的 html 文件,然后你可以使用 string-replace-loader 的所有正常配置。
Same as above should work for Webpack 5, though I haven't tested it, by omitting the @2
and installing string-loader with npm install --save-dev string-replace-loader
.与上面相同应该适用于 Webpack 5,虽然我还没有测试它,通过省略
@2
并使用npm install --save-dev string-replace-loader
。 This is because v3 of the string-replace-loader is expected to work with Webpack 5+, as per the string-replace-loader docs .这是因为 string-replace-loader 的 v3 预计可以与 Webpack 5+ 一起使用,根据string-replace-loader 文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.