Webpack和Angular HTML图像加载 [英] Webpack and Angular HTML image loading
问题描述
我有这样一个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-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图像加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
