Используйте webpack с jade-loader без явно требующих активов

Я пытаюсь использовать jpg-загрузчик Webpack в сочетании с html-загрузчиком, чтобы иметь возможность опускать запросы в jade-шаблонах + использовать путь относительно определенной папки. Я пробовал несколько вещей, никто из них не работал.

По умолчанию jade-loader работает при использовании img(src=require("../../../../assets/images/imac.png") alt="computer") со следующей конфигурацией webpack:

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'
  }
};

Если я добавлю html-loader ({ test: /\.jade$/, loader: 'html-loader!jade-loader' }), который по умолчанию должен запрашивать источники, я продолжаю получать "Error: Module not found". Консоль регистрирует все пути, которые она пыталась, по отношению к текущему рабочему файлу.

Я попытался дать ему некоторый контекст с context: path.resolve(__dirname + "/client"). Это тоже не сработало. Я также попытался соединиться с необработанным загрузчиком: raw-loader!html-loader!jade-loader. Я не получаю ошибку, но вывод wepback, который был подан, не является моим приложением, но вместо этого что-то вроде строк: var jade = require (/......)....

Есть ли у вас идеи?

Спасибо за помощь

Ответ 1

Имел ту же проблему.

https://www.npmjs.com/package/pug-html-loader работал у меня:

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

Ответ 2

Я не знаю, чего ты хочешь. Мне нужно загрузить шаблон из директивы (компонент в 1.5)

angular.module('app').component('myComponent', {
  bindings: {},
  template: require('./mytemplate.jade')()
});

Вы можете заметить, что я вызываю возвращенную функцию.