Question

我正在尝试将Webpack jade-loader与html-loader结合使用，以便能够省略jade模板中的需求+使用相对于某个文件夹的路径。我尝试过一些东西，但都没有。

默认情况下，使用img(src=require("../../../../assets/images/imac.png") alt="computer")时，jade-loader可以使用以下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

我不知道你想要什么。我需要从指令（1.5中的组件）

加载模板

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

您可以注意到我正在调用返回的函数。

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

1 个答案: