如何在webpack中使用自己的jade文件？

Question

我是新手，正在尝试使用自己的html文件在webpack-dev-server中，以及我的webpack构建中。

在我的app.js中，我有：

require('!jade!index.jade')

但这并没有生成一个index.html，这不是我想要的。相反，最好的情况是我可以得到一个字符串输出我的html，这也不是我想要的：

var jade = require('!jade!index.jade')
jade() //outputs my html

如何使其输出index.html文件？如何让webpack-dev-server使用该html文件？

我还应该提到我的jade文件可能会引用stylus文件。

- Terence Chow

---

根据您的使用情况，在开发过程中直接从jade文件创建静态HTML文件可能比在服务器上使用jade文件更好。 - Nuclearman

Answer 1

我使用jade-html-loader，在webpack.config.js中加入以下代码：

entry: ['./src/app.js', 'file?name=index.html!jade-html!./src/index.jade']

您将需要：

npm install --save-dev file-loader jade-html-loader jade

- the_karel

---

你的 webpack.config.js 文件中也没有配置行吗？ - David Rivers

这会给我一个包含 module.exports = "html here..."; 的 .html 文件 - 有什么想法吗？（现在我正在使用Jade的新名称Pug） - Kieren Johnstone

事实上，我真的看不出这会怎么运作。HTML文件始终会成为JS文件，不是吗？ - Kieren Johnstone