CODEWITHSUNDEEP
webpack
user254694
user254694

Reputation: 1612

why is my jade webpack loader not working?

have something like the following (adapted from OReilly's Module and Asset Bundling with webpack http://my.safaribooksonline.com/video/web-development/9781771375887 )

const viewout = document.querySelector(".view");
const view = require('raw!jade-html?pretty=false!../views/index.jade');

viewout.innerHTML = view;

which works, but I would like to have jade in my webpack configuration. So I tried to add the following to my loaders array:

{
      test: /\.jade$/,
      include: [
        Path.resolve(process.cwd(), 'client/views')
      ],
      loader: 'raw!jade-html?pretty=false!'
}

and then I change the require statement in my app code to 

const view = require('../views/index.jade');

which gives me the error

ERROR in ./client/views/index.jade
Module parse failed:

So, to reiterate - the loader parsed and ran fine with the original require statement but doesn't work when I make it into a configuration setting - what am I doing wrong?

Upvotes: 1

Views: 311

Answers (1)

Brian Moon
Brian Moon

Reputation: 26

This is the webpack.config.js that I used to the convert the O'Reilly Example from the inline loader require syntax.

const Path = require('path');

const config = {
  entry: {
    app: ['babel-polyfill','./client/js/app']
  },
  output: {
    path: './build',
    filename: '[name]-bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders:[{
      test: /\.js$/,
      include: [
        Path.resolve(process.cwd(), 'client/js')
      ],
      loader: 'babel',
      query: {
        presets: ['es2015']
      }
    },
    {
      test: /\.jade$/,
      include: [
        Path.resolve(process.cwd(), 'client/views')
      ],
      loaders: ['raw', 'jade-html?pretty=true']
    }]
  },
  resolve: {
    extension: ['', '.js'],
    modulesDirectories: ['node_modules']
  }
};

module.exports = config;

Upvotes: 1

Related Questions