使用webpack在模板中使用图像

Using images in templates with webpack

本文关键字：图像 webpack 使用      更新时间：2023-09-26

嗨，我试着设置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不能。不知道其他人的情况，如果话题就此结束。

我将把我的编辑提升到一个答案，因为(遗憾的是)它似乎是正确的。

似乎没有webpack级别的通用答案，因此它取决于所讨论的模板加载器包。有些可以管理图像，有些则不能。您可能会认为链接加载器应该很容易处理模板和图像，但事实并非如此简单—输入和输出往往不兼容。

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

相关文章：