我遇到了在webpack的自定义加载器中处理'require'语法的问题。 我有一个src折叠和一个dist折叠,使用pug通过webpack将一个HTML文件从src转换为dist,我需要在我的pug文件中需要一个json文件,如下所示,
html(lang="en")
head
meta(name="mobile-web-app-capable" content="yes")
link(rel="manifest", href=require("../manifest.json"))
并且在json文件中,我需要一个像这样的图像文件
{
"name": "Webm Maker",
"display": "fullscreen",
"orientation": "landscape",
"short_name": "Webm Maker",
"icons": [{
"src": "images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
}]
}
我使用文件加载器直接创建一个json文件到dist,但这是不合理的,它无法解析json文件中的src路由。 然后我尝试使用自定义格式文件解决src问题,如下所示:
html(lang="en")
head
meta(name="mobile-web-app-capable" content="yes")
link(rel="manifest", href=require("../manifest.prejson"))
然后,我像这样设置webpack
...
{
test: /\.prejson$/i,
use: [{
loader: 'file-loader'
}, {
loader: path.join(__dirname, 'utils', 'prejson-to-json.js'),
}]
}
...
自定义格式文件manifest.prejson
-{
name: "Webm Maker",
display: "fullscreen",
orientation: "landscape",
short_name: "Webm Maker",
icons: [{
src: require("./images/images.jpeg"),
sizes: "48x48",
type: "image/png"
}]
}
此时,文件加载器解析了图像路径并在dist fold中生成了一个图像文件。但是,我不知道如何处理.prejson文件中的require语法,在自定义加载器js文件'prejson-to-json.js'中,我这样编码,
module.exports = function (source, map) {
console.log('source', source);
this.callback(null, source, map);
return source;
};
图像src路线仍然像'require(...)'; 那么如何解决它让输出可以用指向dist图像文件的正确路径替换require语法?