在 webpack 中使用模板中的图像

Question

您好，我尝试设置 Webpack 以正确处理模板（Mustache 或 Handlebars）。一切正常，但有一个例外：模板中的 img src 属性不被文件加载器处理。可能我不了解工作流程的一些基本知识，但我希望它能够以在 css 文件中解析的方式工作。

这是我关于加载器的 webpack 配置：

loaders: [
        {
            test:   /\.js/,
            loader: 'babel',
            include: [__dirname + '/src', __dirname + '/tests'],
            exclude: /node_modules/,
            query: {
                plugins: ['transform-runtime'],
                presets: ['es2015']
                //presets: ['es2015-native-modules']
            }
        },
        {
            test:   /\.scss/,
             loader: 'style!css!postcss-loader!sass',
            // Or
            //loaders: ['style', 'css', 'sass'],
        },
        {
            test:   /\.html/,
            loader: 'html',
        },
        {
            test: /\.modernizrrc$/,
            loader: "modernizr"
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loader:'file-loader'
        },
        {
            test: /\.mustache$/i,
            loader:'handlebars-loader'
        },
    ],

这是一个示例模板：

<div style="border: solid 2px blue;">
<h2>Template fragment</h2>
<p>{{text}}</p>
<img id="img1" src="{{img}}" alt="">
<img id="img2" src="../img/btn_bubble.png" alt="">

当我从 js 加载模板时，我可以将 img 正确插入到 #img1，但 #img2 保持不变，被包含后显然不起作用。

编辑

似乎它取决于模板加载器包。有些可以管理图像，有些则不能。例如。使用 Handlebars 似乎 handlebars-template-loader 可以，而 handlebars-loader 不能。不知道其他人，如果主题到此结束。

Answer 1

我会将我的编辑提升为答案，因为（遗憾地）它似乎是正确的。

似乎没有通用的 Webpack 级别的答案，因此它取决于有问题的模板加载程序包。有些可以管理图像，有些则不能。您可能认为链接加载器来处理模板和图像应该很容易，但这并不是那么简单——输入和输出往往不兼容。

例如，我不得不从 Mustache 切换到 Handlebars 来解决任务，但 mustache-loader 的家伙似乎也在处理图像加载。