我正在将一个使用 requirejs 的项目转换为 webpack,但遇到了“html-loader”加载器的问题。
package.json:
"html-loader": "^0.3.0",
"webpack": "^1.11.0",
"webpack-dev-server": "^1.10.1"
应用程序/js/webpack.config.js:
// folder structure:
// root
// app/js
// bower_components/
// dist/
// node_modules/
entry: './app/js/main.js',
output: {
path: 'dist/js/',
filename: 'bundle.js',
},
module: {
loaders: [
// Note, via requirejs's "text" plugin, I included templates
// like this: var tpl = require('text!sample.html');
// For webpack, I went through the codebase and cleaned up
// every instance of "text!".
{test: /\.html$/, loader: 'html'}
]
},
resolve: {
root: ['app/js', 'bower_components'],
alias: {
...
}
},
plugins: [
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(
'bower.json', ['main']
)
)
]
当我运行 webpack -- webpack --config app/js/webpack.config.js
-- 我收到以下错误消息:
ERROR in app/js/some/file.js
Module not found: Error: Cannot resolve module 'html' in app/js/some/file.js
我尝试了以下方法,但没有用:
resolveLoader: {
root: [path.join(__dirname, 'node_modules')],
},
还尝试将“webpack.config.js”移动到项目根目录。这也没有帮助。
而且,甚至尝试使用“raw-loader”加载器,这也导致了同样的“无法解析模块‘raw’”错误。
如有任何帮助,我们将不胜感激。谢谢。
最佳答案
在更新这个问题时完全失误了。
1) 我应该一直在使用 text-loader
,它允许我在每次 require('text!some/template.html');
时保留原位。
2) 我的根路径是 not absolute .根据手册,“它必须是绝对路径!不要传递类似 ./app/modules 的内容。”
3) 如果您的require
看起来像require('text!some/file.html')
,那么您就完成了。在 webpack.config.js 中定义加载器是多余的。如果这样做,您的模板最终将看起来像 module.exports="module.exports=\"...\""
。
更新配置:
entry: './app/js/main.js',
output: {
path: 'dist/js/',
filename: 'bundle.js',
},
module: {
loaders: [/*nothing*/]
},
resolve: {
root: [
path.resolve('app/js'),
path.resolve('bower_components')
],
alias: {
...
}
},
plugins: [
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(
'bower.json', ['main']
)
)
]
关于javascript - Webpack 无法解析 html-loader,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31958317/