问题描述
我一直用webpack和角度来打破我的头。这可能有一个简单的答案,但我不能弄明白。我已经阅读了几乎所有关于这个主题的堆栈溢出的答案,无济于事。我有这样一个html页面(还有其他带图片的模板):
p> < body>
< img ng-src =../ images / angular-webpack.png>
< md-button class =md-primary md-raised>
按钮
< / md-button>
< / body>
我也有一个webpack配置:
var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
module.exports = {
context:path.resolve(__ dirname +'/ src'),
entry:['./js/core/app.module.js '],
输出:{
路径:'./release',
publicPath:'/',
文件名:'app.js'
},
模块:{
加载器:[
{
test:/\.html/,
exclude:'node_modules',
loader:'raw- loader'
},
{
test:/\.css/,
exclude:'node_modules',
loader:'style-loader!css-loader '
},
{
test:/\.(jpe?g|png)$/i,
exclude:'node_modules',
loader:' url-loader?limit = 8192!img'
}
]
},
plugins:[
新的webpack.optimize.UglifyJsPlugin({
compr ess:{
warnings:false
}
}),
CopyWebpackPlugin([
{from:'./index.html',to:'./ index.html'}
],{
忽略:[
'* .txt',
{glob:'** / *',dot:true}
]
})
],
devServer:{
contentBase:'./release'
},
watch:true
} ;
...但我看不到我的图片加载。我已经尝试了url-loader,带有publicPath的文件加载器,没有它。我很困惑,我不知道如何格式化webpack配置或html图片标签以使其工作。
任何人都有获得图像与webpack一起使用的经验吗?另外我不想将我的图像包含在控制器或任何其他js文件中。我想要在html页面中声明图像。 c $ c>应该将一个文本文件转换成一个CommonJS模块,该模块将文件内容以字符串形式导出 - 仅此而已。
如果您想让webpack识别文件作为HTML及其所有引用,您需要。 html-loader使用HTML解析器解析给定的文件,并获取对属性中其他文件的引用。默认情况下,这只是< img src =...>
。在你的情况下,你需要告诉 html-loader
来查找 ng-src
属性,如下所示:
// webpack.config.js
...
加载器:[{
test:/\.html$/,
加载器:[
html? + JSON.stringify({
attrs:[img:src,img:ng-src]
})
]}
]
I have been breaking my head with webpack and angular. This might have a simple answer but I cant figure it out. I have read almost every answer here in stack overflow on this topic to no avail.
I have an html page like this (also other template that have images):
<body>
<img ng-src="../images/angular-webpack.png">
<md-button class="md-primary md-raised">
Button
</md-button>
</body>
I also have a webpack config:
var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
module.exports = {
context: path.resolve(__dirname + '/src'),
entry: ['./js/core/app.module.js'],
output: {
path: './release',
publicPath:'/',
filename: 'app.js'
},
module: {
loaders: [
{
test: /\.html/,
exclude: 'node_modules',
loader: 'raw-loader'
},
{
test: /\.css/,
exclude: 'node_modules',
loader: 'style-loader!css-loader'
},
{
test: /\.(jpe?g|png)$/i,
exclude: 'node_modules',
loader: 'url-loader?limit=8192!img'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new CopyWebpackPlugin([
{from: './index.html', to: './index.html'}
], {
ignore: [
'*.txt',
{glob: '**/*', dot: true}
]
})
],
devServer: {
contentBase: './release'
},
watch: true
};
...but i do not see my images loading. I have tried url-loader, file-loader with publicPath and without it. I am confused, I do not know how to format the webpack config or the html image tag for it to work.
Anyone has any experience on getting images to work with webpack? Also I do not want to include my images in the controllers or any other js file. I want the images to be declared in the html page.
The raw-loader
is supposed to turn a text file into a CommonJS module that exports the file contents as a string – nothing more.
If you want webpack to recognize the file as HTML and all its references in it, you need the html-loader. The html-loader parses the given file with an HTML parser and picks up references to other files within attributes. By default, that is only <img src="...">
. In your case, you need to tell the html-loader
to also look for ng-src
attributes, like this:
// webpack.config.js
...
loaders: [{
test: /\.html$/,
loaders: [
"html?" + JSON.stringify({
attrs: ["img:src", "img:ng-src"]
})
]}
]
这篇关于Webpack和Angular HTML图像加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!