我正在尝试将 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(/……) ....
你有什么想法吗?
谢谢你的帮助
最佳答案
有同样的问题。
https://www.npmjs.com/package/pug-html-loader为我工作:
module.exports = {
// your config settings ...
module: [
//your modules...
loaders: [{
include: /\.jade/,
loader: 'pug-html-loader'
}]
]
};
关于javascript - 在不明确要求 Assets 的情况下将 webpack 与 jade-loader 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32435839/