使用webpack模板中的图像-Java 学习之路

您好我尝试设置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 保持不变，并且在被包含后显然不起作用 .

EDIT

看起来它取决于模板加载器包 . 有些人可以管理图像 . 例如 . 与把手似乎把手 - 模板装载机可以和车把装载机不能 . 但是，如果主题在此结束，请不要了解其他人 .

1 回答

0

我会将我的编辑推广到一个答案，因为（遗憾的是）它似乎是正确的 .

似乎没有一般的Webpack级别的答案，因此它取决于所讨论的模板加载器包 . 有些人可以管理图像 . 您可能认为链接加载器以便处理模板和图像应该很容易，但这并不是那么简单 - 输入和输出往往是不兼容的 .

例如，我不得不从Mustache切换到Handlebars来解决任务，但是胡子装载 Worker 似乎也在处理图像加载 .

回复于 2024-05-15T20:46:21+08:00

使用webpack模板中的图像

1 回答

相关问题