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

Depending on your use case, it may be better to create static HTML files directly from the jade file during development before it is served rather than using the jade file on the server. — Nuclearman, Aug 31 '15 at 16:38

the_karel · Accepted Answer · 2015-12-03T15:18:23.087

9

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

edited Dec 03 '15 at 15:18

answered Aug 31 '15 at 13:08

the_karel

1

Don't you also have a configuration line in `webpack.config.js`? – David Rivers Dec 02 '15 at 21:51
This gives me a .html file containing `module.exports = "html here...";` - any ideas? (am using Jade by it's new name, Pug, now) – Kieren Johnstone Aug 11 '16 at 20:57
In fact.. I really can't see how this would work. The HTML file is always going to in fact be a JS file, isn't it? – Kieren Johnstone Aug 11 '16 at 21:24

1 Answers1