Webpack 和 Angular HTML 图像加载答案

【问题标题】：Webpack and Angular HTML image loadingWebpack 和 Angular HTML 图像加载
【发布时间】：2016-05-25 20:29:06
【问题描述】：

我一直在用 webpack 和 angular 打破我的脑袋。这可能有一个简单的答案，但我无法弄清楚。我已经阅读了关于此主题的堆栈溢出中的几乎所有答案。

我有一个这样的 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 页面中声明图像。

【问题讨论】：

标签： javascript html angularjs webpack

【解决方案1】：

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"]
            })
        ]}
    ]

【讨论】：

当我添加你的代码时，我现在可以看到一个名为 images 的文件夹，里面有图像......但是我的应用程序没有加载，它进入一个疯狂的无限循环，试图加载资源，这使得我的电脑尖叫。 :(
死循环什么时候出现？编译的时候？还是在运行时？您是否启用了热模块更换 (HMR)？
它发生在运行时。它发生在 attrs 或没有。此外，当使用 raw-loader 或 file-loader 时，它运行良好。我确实有一些动态加载图像。没有 HMR 启用。我创建了第二个小项目，其中一些图像低于 url-loader 的限制。图片被 base64 编码但不显示。
感谢您的帮助。似乎我现在得到了图像，但现在我在使用 ng-include 加载动态视图时遇到了另一个问题。 Webpack 有时会让人感到困惑和沮丧。 :(
Webpack 的选项可能会令人困惑，是的，但我不认为这都是 webpack 的错。由于不同的模块样式和框架，捆绑前端资产是一个复杂的问题。