将webpack与jade-loader一起使用而不明确要求资产

Question

我正在尝试将Webpack jade-loader与html-loader结合使用,以便能够省略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'
  }
};

如果我添加{ test: /\.jade$/, loader: 'html-loader!jade-loader' }默认情况下应该需要源的html-loader(),我会不断收到'错误:找不到模块'.控制台记录它尝试的所有路径,所有路径都相对于当前工作文件.

我试着给它一些上下文context: path.resolve(__dirname + "/client").它也没用.我也尝试与原始装载机结合使用:raw-loader!html-loader!jade-loader.我没有得到错误,但提供的wepback输出根本不是我的应用程序,而是类似的行:var jade = require(/ ......)....

你有什么主意吗 ？

谢谢你的帮助

Answer 1

有同样的问题。

https://www.npmjs.com/package/pug-html-loader对我有用：

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