javascript - 在不明确要求 Assets 的情况下将 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'
  }
};

如果我添加默认需要源代码的 html-loader ({ test:/\.jade$/, loader: 'html-loader!jade-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'
         }]
    ] 
};