如何在webpack的自定义加载器中处理require语法

时间:2018-01-10 02:37:41

标签: json webpack require loader webpack-file-loader

我遇到了在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语法?

0 个答案:

没有答案