Javascript 用于.ejs模板中图像的网页文件/图像加载器

如果图像标记在我的index.ejs模板中，则我缺少在网页包配置中加载图像的设置

在我的构建过程中，我的项目中html文件中的所有图像都被正确重命名并加载良好，但是.ejs文件中的图像标记被忽略

i、 e在我的.ejs中，如果我有

，它将保持这种方式，但在正常的html文件中，它将更改为

我当前的加载程序：

loaders: [
            //HTML Files
            {
                test: /\.html$/,
                loader: 'html'
            },
            //Transpile ES6 to ES5
            {
                test: /\.js$/,
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: [
                        ["es2015", {"module": false}]
                    ]
                }

            },
            //Extract Normal CSS
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ loader : 'css?sourceMap!autoprefixer', publicPath: "../"})

            },
            //Bundle Less into CSS Code
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({ loader : 'css?sourceMap!autoprefixer!less?sourceMap', publicPath: "../"})
            },
            //Images
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                loader: 'file'
            }
        ]

和重要的插件：

plugins.push(
            new HtmlWebpackPlugin({
                hash: true,
                filename: 'index.html',
                template:  './src/index.ejs',
                favicon: './src/favicon.ico',
                inject : false
            }),
            // Write out CSS bundle to its own file:
            new ExtractTextPlugin({
                filename: 'css/[contenthash].styles.css',
                allChunks: true
            }),
        );

我认为ejs没有图像加载器支持

您可以尝试此链接，以按照此链接中的建议加载图像文件

---

网页包的另一个加载程序包括

，只是为了提供更新的答案。 在Webpack 4中，您可以在

.ejs

文件中加载图像，而无需

html加载程序

将

img

标记中的

src

属性更改为：

“alt=”图像文本“>

使用

esModule:false启用CommonJS模块语法

//webpack.config.js
模块：{
规则：[
...,
测试：/\（png | jpg |等）$/，
使用：[{
加载器：“文件加载器”、//或url加载器
选项：{
...,
esModule:false，
}
}]
]
}
您使用的是哪个
HTMLWebpackPlugin
版本？介绍了2中现在如何支持模板内的加载程序。0@RedMercury谢谢，伙计！这让我发疯了！它像一个傻瓜一样工作——网页包的乐趣哈哈，另一个复杂的加载程序库需要理解。好的，我会尝试一下，谢谢，伙计。使用这个加载程序意味着您必须更改ejs文件中的所有“包含”和“需要”请求？如果您的图像源已经是一个变量，您将如何执行此操作？即此操作不起作用