pugjs / pug-loader

Pug loader module for Webpack
MIT License
425 stars 119 forks source link

Require modules by default (img src) #23

Open FelixLC opened 9 years ago

FelixLC commented 9 years ago

I am trying to use jade-loader in combination with html-loader to be able to omit requires in jade. 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

FelixLC commented 9 years ago

I have posted this on SO, http://stackoverflow.com/questions/32435839/use-webpack-with-jade-loader-without-explicitly-requiring-assets. As it is more a question than an issue, I can close the issue if you want