通过 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 家伙似乎也在处理图像加载。

通过 webpack 在模板中使用图像

Using images in templates with webpack

javascript

mustache

handlebars.js

webpack