bti*_*oco 4 html javascript angularjs webpack
我一直在用webpack和棱角分明.这可能有一个简单的答案,但我无法弄明白.我已经阅读了这个主题的堆栈溢出中的几乎所有答案都无济于事.
我有一个像这样的html页面(也有其他模板有图像):
<body>
<img ng-src="../images/angular-webpack.png">
<md-button class="md-primary md-raised">
Button
</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'],
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
};
...但我没有看到我的图像加载.我已经尝试过url-loader,带有publicPath的文件加载器,没有它.我很困惑,我不知道如何格式化webpack配置或html图像标记使其工作.
任何人都有使用webpack获取图像的经验吗？此外,我不想将我的图像包含在控制器或任何其他js文件中.我希望在html页面中声明图像.
本raw-loader应该把一个文本文件放入导出文件的内容作为一个字符串CommonJS的模块-仅此而已.
如果您希望webpack将文件识别为HTML及其中的所有引用,则需要html-loader.html-loader用HTML解析器解析给定文件,并获取对属性中其他文件的引用.默认情况下,这只是<img src="...">.在您的情况下,您需要告诉html-loader也要查找ng-src属性,如下所示:
// webpack.config.js
...
loaders: [{
test: /\.html$/,
loaders: [
"html?" + JSON.stringify({
attrs: ["img:src", "img:ng-src"]
})
]}
]
| 归档时间： |
|
| 查看次数： |
4236 次 |
| 最近记录： |