FelixLC FelixLC - 3 months ago 78
Jade Question

Use webpack with jade-loader without explicitly requiring assets

I am trying to use Webpack jade-loader in combination with html-loader to be able to omit requires in jade templates + use a path relative to a certain folder. I have tried a few things, none of them worked.

By default jade-loader works when using

img(src=require("../../../../assets/images/imac.png") alt="computer")
, with the following webpack config:

module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./app/app.js'
],
context: path.resolve(__dirname + "/client"),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {

// placed here so we know that it is done before transpiling
preLoaders: [
{ test: /\.js$/, loader: "eslint-loader", exclude: [/node_modules/, /\.config\.js/, /\.conf\.js/ ] }
],

loaders: [
{ test: /\.html$/, loader: 'raw' },
{ test: /\.jade$/, loader: 'jade-loader' },
{ test: /\.less$/, loader: 'style!css!less' },
{ test: /\.css/, loader: 'style!css' },
{ test: /\.(png|jpg|jpeg|svg)$/, loader: 'file' },
{ test: /\.js$/, loader: 'babel?stage=1', exclude: [/client\/lib/, /node_modules/, /\.spec\.js/] }
]
},

eslint: {
configFile: './.eslintrc'
}
};


If I add the html-loader (
{ test: /\.jade$/, loader: 'html-loader!jade-loader' }
) which is supposed to require sources by default, I keep getting the 'Error: Module not found'. The console logs all the paths that it tried, all relative to the current working file.

I tried to give it some context, with
context: path.resolve(__dirname + "/client")
. It didn't work either.
I also tried to combine with the raw loader:
raw-loader!html-loader!jade-loader
. I don't get the error but the wepback output that is served is not my app at all, but instead something along the lines of:
var jade = require(/......) ....

Do you have any idea ?

Thanks for your help

Answer

Had the same Problem.

https://www.npmjs.com/package/pug-html-loader worked for me:

module.exports = {
// your config settings ... 
     module: [
     //your modules... 
         loaders: [{
             include: /\.jade/,
             loader: 'pug-html-loader'
         }]
    ] 
};
Comments