我在使用的WebPack和HtmlWebpackPlugin
下面是它的配置:
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
sdk: '/mylib.js'
})
在我html
我定义script
标签为:
<script src="<%= htmlWebpackPlugin.options.sdk %>"></script>
的WebPack将替换<%= htmlWebpackPlugin.options.sdk %>
的/mylib.js
。然而,一旦我添加了html-loader
插件如下它不工作:
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
attrs: 'img:src'
}
}
]
}
我用html-loader
的原因是在解析HTML文件中的img src
标签。但它与HtmlWebpackPlugin
<%= ... %>
表达冲突。我怎样才能让他们两人的工作?
我想给HTML装载机的财产ignoreCustomFragments
一试。按照docs,你可以把它作为一个选项,装载机忽略了一些零件,取决于正则表达式:ignoreCustomFragments: [/<%=.*%>/]
我发现最简单的解决方法是重命名.ejs extention您的模板。这将在HTML-的WebPack-插件踢(因为它是一个回退EJS装载机),再经过它处理所有的<%=%>它会在html装载机踢。
这样,HTML-的WebPack-插件将运行,然后再其次是HTML装载机。
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html.ejs', // don't forget to rename the actual file
inject: 'body',
sdk: '/mylib.js'
})
您需要将三个步骤。
首先,你需要HtmlWebpackPlugin。如https://stackoverflow.com/a/56264384/9363857指示
其次,你激活HTML装载机。这导致具有线的奇怪结果类似
module.exports=.....
在HTML的中间(更换需要),这是不是真的,你想要什么。
所以,第三,你需要翻译这回HTML,而您需要添加一个提取装载机。如:
test: /\.(html)$/, use: [ 'extract-loader', { loader: 'html-loader' } ]