有个需求是需要把.html 内的所有 script 标签 script:not([src])
和 style 标签 使用对应的 loader 进行处理并将其变为文件引用形式.
script 标签不同于 vue 可能存在 html 文件任何位置,可能需要经过 parse 处理.
类似 Vue-loader
参考大家的方式,最终得到了解决
const root = parse(data.html)
// 针对 script 进行 babel 处理
root.querySelectorAll('script').forEach((script, index) => {
if( !script.getAttribute('src') ) {
script.set_content(
require("@babel/core").transform(script.innerHTML, {
presets: ["@babel/preset-env"],
plugins: [
['@babel/plugin-transform-modules-commonjs'],
['@babel/plugin-transform-object-assign']
]
}).code
)
}
})
data.html = root.toString()
cb(null, data)
1
woshiyigexiaohao OP 有啥思路嘛
|
2
Torpedo 2020-11-26 10:28:52 +08:00
@woshiyigexiaohao https://github.com/jantimon/html-webpack-plugin#configuration 可以把 html 当做模板,注入变量,拼最后生成的 html
|
3
woshiyigexiaohao OP @Torpedo plugins 晚于 loader 执行,如何在 plugin 中对文件运行 loader
|
4
yaphets666 2020-11-26 10:57:45 +08:00
原理嘛那肯定是正则匹配了,vue-loader 也是正则.
|
5
Torpedo 2020-11-26 11:14:21 +08:00
@woshiyigexiaohao 那就先写个解析 html 的 loader,把剩余的扔给后面的 js,styleloader 啥的。不知道 html-loader 行不
|
6
KuroNekoFan 2020-11-26 11:35:46 +08:00
xpath 吧
|
7
auroraccc 2020-11-26 12:11:13 +08:00 1
找个 parse html 的库然后过 loader 拿到处理后的文件地址再替换就好了
|