how to have use own jade file for webpack?

Question

I'm new to webpack and trying to figure out how to use my own html file in the webpack-dev-server, as well as my webpack build.

in my app.js I have:

require('!jade!index.jade')

but that does not make an index.html as I would expect. Instead, it seems at best I can get a string output of my html, which isn't what I want:

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

How do I get it to output an index.html file? How do I get the webpack-dev-server to use that html file?

I should also mention my jade file will likely reference stylus files

Answer 1

I use jade-html-loader with the following entry in webpack.config.js:

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

You will need

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